/* =====================================================================
   LULU'S LAB — DESIGN TOKENS
   Derived from LULU_HOME_APPROVED_COMP (1024 × 1536 artboard).

   MEASUREMENT BASIS
   Every value below was sampled or measured from the approved comp, not
   invented. The comp is treated as a 1024px-wide artboard: 1rem = 16px
   at that width, and the root font-size scales with the viewport (see
   base.css), so the whole composition enlarges proportionally on wider
   screens instead of stranding the design at 1024.

   Comp px -> rem:  value / 16
   ===================================================================== */

:root {
  /* ---- Color (sampled from the comp) -------------------------------
     Pink: median of 7,302 saturated pixels across the tagline, stars,
     bullets, rules, AVAILABLE FOR and LEARN MORE = rgb(201, 18, 86).
     Page: the comp's flat areas sample as rgb(251, 250, 248), a warm
     white. Overridden to true #FFFFFF by client decision (2026-08-17);
     this is authoritative and supersedes the measured value.          */
  --color-pink:        #C91256;
  --color-pink-rule:   #E0508A;   /* lighter pink used for hairlines   */
  --color-bg:          #FFFFFF;
  --color-surface:     #FFFFFF;
  --color-ink:         #111012;   /* body + headline black             */
  --color-ink-soft:    #3A3A3C;
  --color-rule:        #A3A4A8;   /* grey hairline beside EXPLORE      */
  --color-navy:        #16213C;   /* logo field                        */
  --color-spotify:     #1A8B3A;   /* sampled from the comp's LISTEN row */
  --color-artwork-bg:  #F2F0EC;   /* behind artwork while it loads      */
  --color-pending:     #9A9A94;   /* content that is knowingly missing  */
  --color-link:        var(--color-ink);
  --color-focus:       #C91256;

  /* ---- Typefaces ---------------------------------------------------
     First name in each stack is the intended production face. The
     fallbacks keep the page legible and close in proportion until the
     licensed woff2 files are dropped into src/assets/fonts/ (see the
     README there). build.mjs detects those files and links the
     @font-face sheet automatically — no code change needed.           */
  /* 'TeX Gyre Heros Cn' is the most condensed face available as a
     fallback (Helvetica Condensed metrics). It is still ~60% wider than
     Anton, so the headline cannot reach the comp's mass until the real
     file is supplied. */
  --font-display: 'Anton', 'Archivo Black', 'Oswald', 'Haettenschweiler',
                  'TeX Gyre Heros Cn', 'DejaVu Sans Condensed', sans-serif;
  /* Anton ships a single weight (400). Fallback grotesques need 700 to
     approach its colour, so the weight is a token: fonts.css sets it back
     to 400 when the real face is installed. */
  --fw-display: 700;
  --font-serif:   'Playfair Display', 'Lora', 'Libre Baskerville',
                  'GFS Baskerville', Georgia, serif;
  --font-sans:    'Mulish', 'Nunito Sans', 'Avenir Next', 'Poppins',
                  'Carlito', -apple-system, 'Segoe UI', sans-serif;

  /* ---- Type scale (comp px / 16) ----------------------------------- */
  --fs-nav:        0.78rem;   /* 12.5px — nav, social labels           */
  --fs-headline:   4.875rem;  /* 78px   — LULU'S LAB MUSIC             */
  --fs-tagline:    1.625rem;  /* 26px   — Playlist for Living.         */
  --fs-subtagline: 1.0625rem; /* 17px   — Songs that feed the spirit   */
  --fs-statement:  0.84rem;   /* 13.5px — EVERY SONG BEGINS...         */
  --fs-body:       0.78rem;   /* 12.5px — intro paragraphs             */
  --fs-label:      0.75rem;   /* 12px   — AVAILABLE FOR                */
  --fs-listitem:   0.78rem;   /* 12.5px — FILM / TELEVISION / ...      */
  --fs-album-title:  0.82rem;  /* card title, uppercase                 */
  --fs-album-desc:   0.72rem;  /* card editorial description            */
  --fs-album-listen: 0.66rem;  /* LISTEN / Spotify / Apple Music row     */
  --fs-divider:    1.125rem;  /* 18px   — EXPLORE THE COLLECTION       */

  --lh-headline:   0.92;
  --lh-body:       1.36;   /* comp: 17px pitch on 12.5px copy */
  --lh-tight:      1.2;

  --tracking-nav:      0.06em;
  --tracking-label:    0.14em;
  --tracking-listitem: 0.10em;
  --tracking-divider:  0.35em;  /* comp: 22 glyphs span 384px          */
  --tracking-headline: -0.005em;

  /* ---- Layout (comp px / 16) ---------------------------------------
     Left margin 30 · logo column 155 · gutter 29 · text column 396     */
  --page-margin:   1.875rem;  /* 30px  */
  --col-aside:     9.6875rem; /* 155px */
  --col-gutter:    1.8125rem; /* 29px  */
  --col-main:      24.75rem;  /* 396px */
  /* The editorial composition is capped here and centred; anything wider
     than this is margin. 1200 = the comp's 1024 artboard at 1.17x, which
     keeps the comp's proportions while filling a laptop comfortably. */
  --page-max:      1200px;

  /* Hero photograph: cropped from the comp at x470 -> 1024, y0 -> 546.
     Expressed as a percentage of page width so the bleed holds at any
     viewport. */
  --hero-media-w:  38.67%;
  --hero-media-h:  34.125rem;  /* comp 546px at the artboard's 1rem = 16px */
  /* How far the page is from the viewport edges once the composition is
     capped — used to let the photograph bleed past the capped shell. */
  --bleed: max(0px, (100vw - var(--page-max)) / 2);

  /* ---- Vertical rhythm (comp px / 16) ------------------------------ */
  --space-nav-underline: 0.4375rem; /* 7px   nav box -> pink underline  */
  --space-nav-headline:  2.1875rem; /* 35px                             */
  --space-headline-tag:  1.375rem;  /* 22px                             */
  --space-tag-sub:       0.5rem;    /* 8px                              */
  --space-sub-ornament:  1.0625rem; /* 17px                             */
  --space-ornament-stmt: 1.3125rem; /* 21px                             */
  --space-stmt-body:     0.375rem;  /* 6px                              */
  --space-paragraph:     0.875rem;  /* 14px between intro paragraphs    */
  --space-logo-rule:     1.3125rem; /* 21px  logo -> pink hairline      */
  --space-rule-label:    1.4375rem; /* 23px  hairline -> AVAILABLE FOR  */
  --space-label-list:    1.0625rem; /* 17px                             */
  --space-list-item:     1.5rem;    /* 24px pitch between list items    */
  --space-list-cta:      1.125rem;  /* 18px  last item -> LEARN MORE    */
  --space-hero-divider:  2.75rem;   /* 60px  body -> EXPLORE row        */
  --space-hero-top:      1.5rem;    /* 24px  page top -> nav / logo     */

  /* ---- Details ------------------------------------------------------ */
  --rule-hairline: 1px;
  --underline-weight: 2px;
  --bullet-size: 0.28125rem;  /* 4.5px pink dot */
  --social-size: 1.0625rem;   /* 17px */
  --social-gap:  1.375rem;    /* 22px */
  --star-size:   1.0625rem;   /* 17px */

  --transition-fast: 120ms ease;
  --transition-base: 200ms ease;
  --focus-width: 2px;
  --focus-offset: 3px;

  /* Album artwork stays 1:1 site-wide (locked standard). */
  --album-aspect: 1 / 1;
  /* Collection grid. Gutters are a proportion of the card, not of the
     viewport, so 3-across stays editorial rather than drifting apart. */
  --grid-gap-x: clamp(1.25rem, 3.4vw, 2.6rem);
  --grid-gap-y: clamp(2.25rem, 5vw, 3.6rem);
  --space-collection-top: 3.25rem;
  --availability-separator: '/';
  --availability-separator-space: 0.5rem;
}