/* ============================================================
   JINSEN VISION DECK — DESIGN TOKENS
   Cross-referenced from:
   - JINSEN_VISION_DECK_Design_Brief.md (color, register, restraint)
   - m3_typography_brief.md (type scale, tracking, line-height)
   - design_layout_system.md (soft brutalism, tonal elevation, 8dp grid)
   - icon_system.md (Material Symbols Sharp, light weight)
   Font roles overridden per director instruction (custom Studio Squat faces).
   ============================================================ */

:root {
  /* ---- TYPE FAMILIES (role-mapped per director) ---- */
  --font-display: "Image Future", system-ui, sans-serif;            /* Bold   -> Display + Headline */
  --font-body:    "Image Future Medium", "Image Future", system-ui, sans-serif; /* Medium -> Body (director switch) */
  --font-subtext: "OT Jubilee Golden Medium", Georgia, serif;       /* Med    -> Title / subtext / pull-quote */
  --font-mono:    "Sohne Mono Kraftig", ui-monospace, monospace; /* Mono -> Label / caption / chrome */

  /* ---- TRACKING ----
     Director mandate: Image Future +2% floor, Sohne Mono +12%.
     Lexus spec (gemini md): display headers 0.15-0.25em, utility labels 0.10em.
     Reconciled: big all-caps display runs Lexus-wide for premium scale-contrast;
     sub-headers a touch tighter; BODY tracking OPENED per director note
     ("letter spacing need to increase, too tight"). */
  --track-display: 0.18em;   /* 18% — Image Future hero caps, Lexus-wide */
  --track-headline: 0.10em;  /* 10% — Image Future section headers */
  --track-body: 0.055em;     /* 5.5% per director */
  --track-subtext: 0.01em;   /* OT Jubilee pull-quotes, near-neutral */
  --track-mono: 0.12em;      /* 12% — Sohne Mono captions/labels/chrome */

  /* ---- M3 TYPE SCALE (rem; 1rem = 16px) ----
     Pulled verbatim from m3_typography_brief.md, then bound to our faces.
     We keep M3's line-heights to preserve the editorial rhythm. */
  --fs-display-lg: 3.56rem;  --lh-display-lg: 4.0rem;
  --fs-display-md: 2.81rem;  --lh-display-md: 3.25rem;
  --fs-display-sm: 2.25rem;  --lh-display-sm: 2.75rem;
  --fs-headline-lg: 2.0rem;  --lh-headline-lg: 2.5rem;
  --fs-headline-md: 1.75rem; --lh-headline-md: 2.25rem;
  --fs-headline-sm: 1.5rem;  --lh-headline-sm: 2.0rem;
  --fs-title-lg: 1.37rem;    --lh-title-lg: 1.75rem;
  --fs-title-md: 1.0rem;     --lh-title-md: 1.5rem;
  --fs-body-lg: 1.0rem;      --lh-body-lg: 1.5rem;
  --fs-body-md: 0.875rem;    --lh-body-md: 1.25rem;
  --fs-label-lg: 0.875rem;   --lh-label-lg: 1.25rem;
  --fs-label-md: 0.75rem;    --lh-label-md: 1.0rem;
  --fs-label-sm: 0.6875rem;  --lh-label-sm: 1.0rem;

  /* ---- 8DP SPACING SCALE ----
     Adopted from spacing.md (px-named tokens, median 8px base, 4px half-step).
     Token name = px value, for zero-ambiguity lookup. All margin/padding/gap
     must use these — no magic numbers. Prefer gap over margin in flex/grid. */
  --space-4:  4px;   /* xs  — icon padding, hairline gaps */
  --space-8:  8px;   /* sm  — small component gaps, tight padding */
  --space-12: 12px;  /* md  — compact card padding, dense rows */
  --space-16: 16px;  /* base — standard component/modal padding */
  --space-24: 24px;  /* lg  — section breathing room, column gaps */
  --space-32: 32px;  /* xl  — spacious layout gaps */
  --space-40: 40px;  /* 2xl — generous padding */
  --space-48: 48px;  /* 3xl — major layout blocks */
  --space-64: 64px;  /* 4xl — full-section blocks */
  --space-80: 80px;  /* 5xl — empty state / hero padding only */
  /* negative offset tokens — bleed/overlap effects only, not layout spacing */
  --space-n4:  -4px;
  --space-n8:  -8px;
  --space-n12: -12px;

  /* ---- COLOR: JINSEN / LEXUS (LIGHT) ----
     From brief §03. Cool off-white, deep near-black, mid-grey.
     Blue/red sampled-close from supplied logo (cobalt + vermilion). */
  --c-cream:      #F4F4F2;  /* primary background */
  --c-ink:        #161616;  /* primary type */
  --c-grey:       #6B6B6B;  /* secondary type, captions, chrome */
  --c-grey-soft:  #9A9A98;  /* faint metadata on cream */
  --c-hairline:   #E4E4E1;  /* hairline on cream — per Lexus spec #EAEAEA, tuned to F4F4F2 ground */
  --c-jinsen-blue: #2173E9; /* SAMPLED from supplied jinsen-logo.png */
  --c-jinsen-blue-deep: #16438F; /* institutional deep blue, derived from sampled hue */
  --c-jinsen-red:  #B90517; /* SAMPLED from supplied jinsen-logo.png */

  /* ---- COLOR: SECOND LIFE / LOTUS (DARK) ----
     The built-from-zero brand. Near-black field, cream type.
     Same accents, but they read hotter against dark. */
  --d-bg:        #0E0E0F;   /* near-black, not pure */
  --d-surface:   #161618;   /* tonal elevation L1 */
  --d-surface-2: #1E1E21;   /* tonal elevation L2 */
  --d-type:      #F1F1EE;   /* cream-white type */
  --d-grey:      #8A8A8C;   /* secondary on dark */
  --d-hairline:  #242427;  /* hairline on dark — per Lexus spec #222222, tuned to 0E0E0F ground */
  --d-blue:      #5996EF;   /* lifted blue for dark contrast (sampled highlight tone) */
  --d-red:       #D8324A;   /* lifted red for dark contrast */

  /* ---- MOTION ---- */
  --ease-lexus: cubic-bezier(0.22, 1, 0.36, 1);   /* composed, settling — Lexus */
  --ease-lotus: cubic-bezier(0.16, 1, 0.3, 1);    /* quick, sharp — Lotus */
  --dur-slow: 900ms;
  --dur-med: 600ms;
  --dur-fast: 320ms;

  /* ---- A4 LANDSCAPE PROPORTION (297 x 210 = 1.4143:1) ---- */
  --a4-ratio: 1.41428571;

  /* ---- VIEWPORT MARGINS (shared by slides + fixed chrome) ----
     Defined at root so the fixed header/folio align exactly with slide content. */
  --m-outer: clamp(40px, 6vw, 110px);
  --m-top: clamp(34px, 5vh, 70px);
  --m-bottom: clamp(34px, 5vh, 70px);
  --m-chrome: clamp(17px, 2.5vh, 35px);   /* 50% of m-top — for fixed header/folio */

  /* ---- EDGE PADDING (full-width layout) ----
     Content fills the full viewport; this is the left/right gutter that the
     slide content, header, and folio all share. Adjust this one value to
     widen/narrow the usable area. */
  --rail-pad: 48px;   /* left/right gutter, all screen sizes */
}