/* ==========================================================================
   Y.O.Y CREATIVE STUDIO — Design tokens
   Brand colours are pixel-sampled from yoycreativestudio1.pdf.
   See _research/03-DESIGN-SYSTEM.md for rationale.
   ========================================================================== */

:root {
  /* ---- Brand, sampled from the deck ------------------------------------ */
  --yoy-oxblood:  #3D080E;   /* cover ground (p1) — the hero ground         */
  --yoy-red:      #A00000;   /* logo strike-rule + ball (p1, p18)           */
  --yoy-red-hot:  #D4231C;   /* the same red lifted for thin lines on black */
  --yoy-amber:    #FCA900;   /* headings on black (p14, p18)                */
  --yoy-gold:     #E0B134;   /* subtitle on oxblood (p1)                    */
  --yoy-black:    #000000;
  --yoy-paper:    #FDFDFD;
  --yoy-crumple:  #F5F4F0;   /* crumpled-paper sections (p15, p16)          */

  /* ---- Derived neutrals ------------------------------------------------- */
  --ink-900: #0A0506;        /* page ground — warm, never pure black        */
  --ink-800: #140A0C;
  --ink-700: #1F1012;        /* card ground                                 */
  --ink-600: #2B1518;        /* hairline borders on dark                    */
  --cream:   #F4EDE4;        /* body text on dark — warm, not white         */
  /* Muted steps are deliberately brighter than v1 (which used 55% / 40%):
     secondary copy on these grounds has to clear 7:1, not just look moody. */
  --cream-80: rgba(244, 237, 228, 0.84);
  --cream-70: rgba(244, 237, 228, 0.74);
  --cream-55: rgba(244, 237, 228, 0.64);
  --hairline: rgba(244, 237, 228, 0.12);

  --grad-hero: radial-gradient(120% 90% at 50% 8%, #4A0B12 0%, #3D080E 45%, #23050A 100%);
  --vignette:  radial-gradient(ellipse at 50% 45%, rgba(0,0,0,0) 40%, rgba(10,5,6,0.62) 100%);

  /* ---- Type ---------------------------------------------------------------
     v1 used Bodoni Moda for headings and Inter Tight 300 for body. Bodoni's
     hairlines vanish below ~40px on a dark ground and 300-weight body text
     on oxblood reads grey. v2:
       Bricolage Grotesque — one variable family for display AND text; its
                             optical-size axis opens the letterforms up at
                             body sizes and tightens them at poster sizes.
       Instrument Serif    — italic accent words only, at display sizes,
                             keeping an editorial serif thread to the Didone mark.
       Geist Mono          — small meta labels, at 12px minimum.             */
  --font-display: "Bricolage Grotesque", system-ui, -apple-system, sans-serif;
  --font-sans:    "Bricolage Grotesque", system-ui, -apple-system, sans-serif;
  --font-serif:   "Instrument Serif", "Iowan Old Style", Georgia, serif;
  --font-mono:    "Geist Mono", ui-monospace, SFMono-Regular, monospace;

  --fs-mega:  clamp(4rem, 17vw, 20rem);
  --fs-h1:    clamp(2.6rem, 6.4vw, 6.75rem);
  --fs-h2:    clamp(2rem, 4.2vw, 4.25rem);
  --fs-h3:    clamp(1.25rem, 1.6vw, 1.6rem);
  --fs-body:  clamp(1.0625rem, 0.55vw + 0.9rem, 1.1875rem);
  --fs-small: 0.9375rem;
  --fs-label: 0.75rem;       /* 12px mono labels — never smaller            */

  --ls-display: -0.035em;
  --ls-label:    0.12em;
  --lh-display:  0.98;
  --lh-body:     1.6;
  --measure:     60ch;

  /* ---- Space & layout ---------------------------------------------------- */
  --sp-section: clamp(6rem, 12vw, 11rem);
  --sp-gutter:  clamp(1.25rem, 4vw, 4rem);
  --container:        1440px;
  --container-narrow:  900px;

  /* ---- Radius — media only; chrome stays square ------------------------- */
  --r-sm:   3px;
  --r-md:   8px;
  --r-lg:  18px;
  --r-pill: 999px;

  /* ---- Motion — slower than v1 across the board ------------------------- */
  --e-out:   cubic-bezier(0.16, 1, 0.3, 1);
  --e-inout: cubic-bezier(0.76, 0, 0.24, 1);
  --d-fast: 0.45s;
  --d-base: 0.9s;
  --d-slow: 1.4s;

  --z-nav: 100;
  --z-progress: 110;
  --z-cursor: 300;
  --z-lightbox: 400;
  --z-preloader: 500;
}

[data-ground="paper"] {
  --ground: var(--yoy-crumple);
  --body-color: #1A0D0F;
  --muted: rgba(26, 13, 15, 0.72);
  --rule: rgba(26, 13, 15, 0.16);
  --accent: var(--yoy-red);
}
[data-ground="ink"] {
  --ground: var(--ink-900);
  --body-color: var(--cream);
  --muted: var(--cream-70);
  --rule: var(--hairline);
}
[data-ground="oxblood"] {
  --ground: var(--yoy-oxblood);
  --body-color: var(--cream);
  --muted: var(--cream-80);
  --rule: var(--hairline);
  --accent: var(--yoy-gold);   /* amber vibrates on oxblood — gold instead */
}

@media (prefers-reduced-motion: reduce) {
  :root { --d-fast: 0.01ms; --d-base: 0.01ms; --d-slow: 0.01ms; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}