/* ============================================================================
   YDS Lab — canonical design tokens
   ----------------------------------------------------------------------------
   SOURCE OF TRUTH:  yds-customiser-v2/src/styles/colors_and_type.css  (:root)
   This file is a PORT, not an original. When v2's token chord changes, re-sync
   this file from that one — do NOT hand-tune values here in isolation.
   Ported: 2026-07-31 · v2 bundle "Egyptian Blue navy / Pale Orange" (decision #155/#163).

   Every yds-lab static page links this ONE file so palette / type / radii /
   shadows never drift between tools:
       <link rel="stylesheet" href="/tokens.css" />

   Scope: design tokens only. Customiser-canvas-only tokens (wobble / tilt /
   status primitives) are intentionally omitted — they have no meaning in lab.
   ============================================================================ */

:root {
  /* ---------- CORE PALETTE (bundle CSS values, byte-for-byte) ---------- */
  --yds-cream: #faf5e6;
  --yds-cream-soft: #fdfaef;
  --yds-cream-deep: #f0e9d2;

  --yds-navy: #203a6c;       /* Egyptian Blue — outlines + block shadow */
  --yds-navy-deep: #16285a;
  --yds-navy-ink: #0e2040;
  --yds-navy-wash: #b7c2da;

  --yds-orange: #f6a409;     /* Pale Orange */
  --yds-orange-deep: #de8e00;
  --yds-orange-soft: #fcd988;

  /* ---------- SEMANTIC SURFACES ---------- */
  --bg: var(--yds-cream);
  --bg-soft: var(--yds-cream-soft);
  --bg-sunk: var(--yds-cream-deep);
  --surface: #ffffff;
  --line: var(--yds-navy);
  --line-soft: var(--yds-navy-wash);

  /* ---------- TEXT ---------- */
  --fg1: var(--yds-navy-ink);   /* headings, body */
  --fg2: var(--yds-navy);       /* labels, secondary */
  --fg3: #4e5f78;               /* muted captions — AA-darkened 2026-06-20 */
  --fg-on-navy: var(--yds-cream);
  --fg-on-orange: var(--yds-navy-ink);

  /* ---------- SEMANTIC STATE ---------- */
  --accent: var(--yds-orange);
  --accent-deep: var(--yds-orange-deep);
  --success: #4c8a4a;
  --warning: #e08820;
  --danger: #c94a3a;

  /* ---------- CTA DISCIPLINE ----------
     Pale orange is reserved for the single primary CTA per surface.
     rest = deep (#de8e00), hover = bright (#f6a409), text = navy-ink (AA 5.49:1). */
  --cta-primary: var(--yds-orange-deep);
  --cta-primary-hover: var(--yds-orange);
  --cta-primary-text: var(--yds-navy-ink);

  /* ---------- TYPE ----------
     Display = Bowlby One SC (single-weight 400 — NEVER set 700/800 on it).
     Hand = Caveat Brush. Body/UI = Montserrat. */
  --font-display: "Bowlby One SC", "Bowlby One", "Rubik Mono One", system-ui, sans-serif;
  --font-hand: "Caveat Brush", "Caveat", "Permanent Marker", cursive;
  --font-sans: "Montserrat", "Nunito", "Nunito Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* ---------- TYPE SCALE (1.200 minor third) ---------- */
  --fs-xs: 12px;
  --fs-sm: 14px;
  --fs-base: 16px;
  --fs-md: 18px;
  --fs-lg: 22px;
  --fs-xl: 28px;
  --fs-2xl: 36px;
  --fs-3xl: 48px;
  --fs-4xl: 64px;
  --fs-5xl: 84px;

  --lh-tight: 1.05;
  --lh-snug: 1.2;
  --lh-normal: 1.5;
  --lh-loose: 1.7;

  --tracking-tight: -0.02em;
  --tracking-normal: 0em;
  --tracking-wide: 0.06em;
  --tracking-widest: 0.14em;

  /* ---------- SPACING (4px grid) ---------- */
  --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: 96px;

  /* ---------- RADII ---------- */
  --r-sm: 6px;
  --r-md: 12px;
  --r-lg: 20px;
  --r-xl: 28px;
  --r-pill: 999px;
  --r-sticker: 16px;

  /* ---------- BORDERS (thick marker outlines) ---------- */
  --bw-thin: 1.5px;
  --bw-line: 2.5px;
  --bw-stroke: 4px;
  --bw-bold: 6px;
  --bw-sticker: 3px;

  /* ---------- SHADOWS (offset "sticker" signature) ---------- */
  --shadow-sm: 0 1px 0 rgba(14, 32, 64, 0.06);
  --shadow-md: 0 4px 0 var(--yds-navy);
  --shadow-lg: 0 8px 0 var(--yds-navy);
  --shadow-soft: 0 8px 24px rgba(14, 32, 64, 0.08);
  --shadow-inset: inset 0 2px 0 rgba(14, 32, 64, 0.08);
  --shadow-float: 0 4px 0 var(--yds-navy);

  /* ---------- DIVIDERS ---------- */
  --divider: rgba(14, 32, 64, 0.15);

  /* ---------- MOTION ---------- */
  --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
  --dur-fast: 140ms;
  --dur-base: 220ms;
  --dur-slow: 360ms;
}