/* ==========================================================================
   tokens.css — Yuvraj Jewellers storefront design tokens.

   Single source of truth for palette, type, spacing, elevation, motion and
   stacking. Loaded first in the storefront stack (includes/storefront_head.php)
   so every later sheet can consume these values.

   It must load BEFORE css/ecommerce.css: that file resolves ~10 colours through
   var(--theme_color_*, #D41A20), which were originally defined by the retired
   css/custom.css. Remapping them here (see "Legacy variable bridge") repoints
   the old snack-brand red at the jewellery palette without editing ecommerce.css.
   ========================================================================== */

:root {
    /* ---------- Brand palette ---------- */
    --gold: #c9a227;
    --gold-deep: #a8851c;
    --gold-soft: #e8d9a0;
    --gold-wash: #f5eed9;

    --ink: #1a1a1a;
    --ink-soft: #57534c;
    --ink-muted: #8a847a;

    --ivory: #faf7f2;
    --ivory-alt: #f4efe7;
    --white: #ffffff;
    --line: #e5ded1;
    --line-strong: #d5cbb8;

    /* Retained aliases — css/theme.css was written against these names. */
    --cream: var(--ivory);
    --cream-alt: var(--ivory-alt);

    --footer-bg: #141312;
    --footer-text: #c4beb4;
    --footer-line: #302c26;

    --success: #1f7a4d;
    --warning: #b8860b;
    --danger: #a3232b;

    /* ---------- Typography ---------- */
    --font-serif: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
    --font-sans: 'Inter', 'Helvetica Neue', Arial, sans-serif;

    --fs-display: 3.25rem;   /* hero h1 */
    --fs-h1: 2.5rem;
    --fs-h2: 2rem;
    --fs-h3: 1.5rem;
    --fs-h4: 1.25rem;
    --fs-body: 1rem;
    --fs-sm: 0.9375rem;
    --fs-xs: 0.8125rem;
    --fs-eyebrow: 0.75rem;

    --lh-tight: 1.15;
    --lh-heading: 1.25;
    --lh-body: 1.65;

    --ls-eyebrow: 0.22em;
    --ls-heading: 0.04em;
    --ls-button: 0.14em;

    /* ---------- Spacing ---------- */
    --sp-1: 4px;
    --sp-2: 8px;
    --sp-3: 12px;
    --sp-4: 16px;
    --sp-5: 24px;
    --sp-6: 32px;
    --sp-7: 48px;
    --sp-8: 64px;
    --sp-9: 88px;

    --gutter: var(--sp-4);          /* page side padding, grows at md+ */
    --section-y: var(--sp-7);       /* section vertical rhythm, grows at md+ */

    /* ---------- Layout ---------- */
    --content-max: 1320px;
    --header-height: 104px;         /* real value written by JS in header.php */
    --bottomnav-h: 60px;
    --tap-min: 44px;

    /* ---------- Shape & elevation ---------- */
    --radius-sm: 2px;
    --radius-md: 6px;
    --radius-lg: 14px;
    --radius-pill: 999px;

    --shadow-sm: 0 1px 2px rgba(26, 26, 26, .06);
    --shadow-md: 0 4px 16px rgba(26, 26, 26, .08);
    --shadow-lg: 0 12px 34px rgba(26, 26, 26, .14);
    --shadow-nav: 0 -2px 14px rgba(26, 26, 26, .10);

    /* ---------- Motion ---------- */
    --ease: cubic-bezier(.4, 0, .2, 1);
    --dur-fast: 140ms;
    --dur: 240ms;
    --dur-slow: 380ms;

    /* ---------- Stacking ----------
       One ordered scale. Replaces the previous 999 / 1040 / 1050 / 9999 /
       99991 free-for-all, which is why the floating buttons used to render
       on top of the mini-cart drawer. */
    --z-sticky: 100;
    --z-header: 900;
    --z-bottomnav: 950;
    --z-fab: 960;
    --z-overlay: 1000;
    --z-drawer: 1010;
    --z-menu: 1020;
    --z-toast: 1100;

    /* ---------- Legacy variable bridge ----------
       Consumed by css/ecommerce.css. Values are the jewellery palette, so the
       old snack-brand colours can never resolve, even via fallback. */
    --theme_color_1: var(--ink);
    --theme_color_2: var(--success);
    --theme_color_3: var(--gold);
    --theme_color_4: var(--gold-soft);
    --theme_color_5: var(--ink-soft);
    --theme_color_6: var(--gold-deep);
    --theme_side_spacing: 0px;
}

@media (min-width: 768px) {
    :root {
        --gutter: var(--sp-6);
        --section-y: var(--sp-8);
        --header-height: 118px;
    }
}

@media (min-width: 992px) {
    :root {
        --section-y: var(--sp-9);
        --header-height: 127px;
    }
}

@media (prefers-reduced-motion: reduce) {
    :root {
        --dur-fast: 0ms;
        --dur: 0ms;
        --dur-slow: 0ms;
    }
}