/* ==========================================================================
   tokens-cosmic.css
   Re-establishes the cosmic dark-mode design tokens that all page-specific
   stylesheets (shipping.css, faq.css, contact.css, legal.css, 404.css,
   product.css, shop.css, cart.css) were written against.

   These tokens previously lived in homepage-squatch.css. When the page
   refactor swapped squatch out for the styles/catalog/home trio, the names
   collided: catalog.css defines --ink as #ffffff (white card surface), so
   panels meant to be dark started painting white. Loading this file AFTER
   catalog.css restores the original dark values for cosmic pages.

   Catalog.html itself does NOT load this file: its white --ink is correct
   for its card-grid surface. Every other interior page does.
   ========================================================================== */

:root {
    --ink:           #05010F;                       /* page background */
    --ink-up:        #0E0825;                       /* card / panel surface */
    --ink-panel:     #14103A;                       /* deeper panel */
    --cream:         #F4EEDC;                       /* primary heading color */
    --cream-warm:    #FFF2D0;                       /* hover / emphasis */
    --gold:          #E9C46A;                       /* brand accent */
    --gold-deep:     #C99A3C;                       /* gold pressed state */
    --punch:         #FF2FC7;                       /* hot accent (returns, sale) */
    --cyan:          #2FD6E6;
    --lav:           #7C5FEB;
    --text:          rgba(244, 238, 220, 0.90);     /* body copy */
    --text-dim:      rgba(244, 238, 220, 0.60);     /* secondary text */
    --text-mute:     rgba(244, 238, 220, 0.42);     /* labels, meta */
    --line:          rgba(244, 238, 220, 0.08);     /* hairline dividers */
    --line-strong:   rgba(244, 238, 220, 0.18);     /* card borders */
}

/* Default body chrome for any page that opts into the cosmic theme.
   Overridable by page-specific CSS via later cascade. */
body.cosmic-page {
    background: var(--ink);
    color: var(--cream);
    font-family: "Inter Tight", system-ui, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Reusable scope for catalog-style WHITE card grids embedded inside an
   otherwise dark page (e.g. the "Shop Bestsellers" carousel on 404, or
   the related-products row on product.html). Wrap such sections in
   <div class="light-cards-scope"> to revert --ink locally. */
.light-cards-scope {
    --ink:        #ffffff;
    --ink-dim:    rgba(255, 255, 255, 0.70);
    --ink-faint:  rgba(255, 255, 255, 0.50);
}