/* GOTTA — design tokens
   Source: 03_identity/visual-identity-system.md (LOCKED)
   Editorial Marble Luxury — neutrals dominate (70%+); gold is earned. */

:root {
    /* Neutrals */
    --color-onyx:        #0A0A0A;
    --color-graphite:    #2B2824;
    --color-fog:         #8C8A84;
    --color-stone:       #E4DCCB;
    --color-ivory:       #F6F1E8;
    --color-crown-gold:  #C9A568;

    /* Marble dominants (per-SKU) */
    --color-marble-focus:  #5E2E18;
    --color-marble-play:   #0D1F3C;
    --color-marble-fck:    #4A0E15;
    --color-marble-chill:  #0A0A0A;
    --color-marble-sleep:  #2A2A2E;
    --color-marble-lounge: #28342C;
    --color-marble-glow:   #EDE4D2;
    --color-marble-vibe:   #8C4A22;
    --color-marble-create: #0F3D2E;

    /* Functional UI signals (digital only) */
    --color-success:  #3E6B52;
    --color-warning:  #B7832F;
    --color-error:    #7D2A2E;

    /* Surfaces */
    --bg-page:    var(--color-ivory);
    --bg-alt:     var(--color-stone);
    --bg-dark:    var(--color-onyx);
    --ink:        var(--color-graphite);
    /* --ink-soft is the semantic "muted text on light surfaces" alias.
       Decoupled from --color-fog (which is locked at #8C8A84 and would fail
       WCAG AA on ivory at ~2.8:1). This value hits ~6:1 on --bg-page.
       Dark sections should use --color-fog directly or override locally. */
    --ink-soft:   #5A5854;
    --ink-strong: var(--color-onyx);
    --ink-on-dark: var(--color-ivory);
    --rule:       rgba(43, 40, 36, 0.16);
    --rule-on-dark: rgba(246, 241, 232, 0.16);

    /* Type families — Cormorant Garamond (display) + Inter (everything else). */
    --ff-display: 'Cormorant Garamond', Georgia, serif;
    --ff-text:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
    --ff-mono:    'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;

    /* Type sizes — fluid via clamp(), per section sizing rule.
       Mobile → tablet → desktop bookends per visual-identity-system §Mobile scale. */
    --fs-h1: clamp(3.5rem, 4.5vw + 2rem, 7.5rem);    /* 56 → 120 */
    --fs-h2: clamp(2.25rem, 2.8vw + 1.4rem, 4.5rem); /* 36 → 72 */
    --fs-h3: clamp(1.75rem, 1.4vw + 1.2rem, 2.75rem);/* 28 → 44 */
    --fs-h4: clamp(1.25rem, 0.5vw + 1.1rem, 1.75rem);/* 20 → 28 */
    --fs-eyebrow: 0.75rem;       /* 12px */
    --fs-body-l:  clamp(1rem, 0.25vw + 0.95rem, 1.25rem);  /* 16 → 20 */
    --fs-body-m:  clamp(0.95rem, 0.1vw + 0.92rem, 1.0625rem); /* 15 → 17 */
    --fs-body-s:  0.875rem;      /* 14px */
    --fs-micro:   0.6875rem;     /* 11px */

    /* Tracking */
    --tr-display-tight: -0.02em;
    --tr-display:       -0.005em;
    --tr-eyebrow:       0.2em;
    --tr-button:        0.16em;

    /* Leading */
    --lh-display: 1.05;
    --lh-display-2: 1.12;
    --lh-h3: 1.18;
    --lh-body: 1.5;
    --lh-tight: 1.3;

    /* Spacing — fluid scale */
    --space-3xs: 0.25rem;
    --space-2xs: 0.5rem;
    --space-xs:  0.75rem;
    --space-s:   1rem;
    --space-m:   1.5rem;
    --space-l:   2.25rem;
    --space-xl:  clamp(3rem, 4vw, 5rem);
    --space-2xl: clamp(4.5rem, 7vw, 8rem);
    --space-3xl: clamp(6rem, 10vw, 12rem);

    /* Layout */
    --content-max: 1440px;
    --content-narrow: 880px;
    --gutter: clamp(1.25rem, 4vw, 3rem);

    /* Borders / radius / shadow */
    --radius-xs: 2px;
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 14px;

    /* Motion */
    --ease-soft: cubic-bezier(0.22, 1, 0.36, 1);
    --ease-quiet: cubic-bezier(0.4, 0, 0.2, 1);
    --dur-fast: 180ms;
    --dur-med:  360ms;
    --dur-slow: 720ms;

    /* Z */
    --z-nav:   100;
    --z-modal: 1000;
    --z-gate:  1100;
}