/* ==========================================================================
   Tiny Beginnings — Design Tokens
   Transcribed from claude/brand-and-design-system-v3.md §16.
   This file is the implementation of that document. Do not invent a value
   here: add it to the design system first, then transcribe it.

   Two documented choices made at build time (design system §18, items 6 & 7):
     · The primary button fill ships as --color-action-aa (#906C54, 4.50:1)
       rather than the reference --color-action (#9C7860, 3.81:1). Same hue,
       23% darker, and it clears AA for the Shell label. Both tokens remain
       defined so the decision is one line to reverse.
     · --color-muted aliases --color-stone-aa (4.94:1) rather than
       --color-stone (3.87:1), for the same reason.
   ========================================================================== */

:root {

  /* --- NEUTRALS (warm; there is no grey and no cool hue in this brand) --- */
  --color-cream:    #FBF2E8;   /* page background                    */
  --color-shell:    #FFF9F1;   /* card surface — 1.06:1 on cream     */
  --color-linen:    #F7E7DA;   /* chips, inputs, control tracks      */
  --color-wheat:    #F2DAC5;   /* swatch 1 — washes, selected chips  */
  --color-sand:     #DBC3A9;   /* swatch 2 — borders                 */
  --color-taupe:    #B09880;   /* swatch 3 — strong borders, strokes */
  --color-stone:    #8C7667;   /* muted text — 3.87:1, see §2.5      */
  --color-stone-aa: #7B6556;   /* accessible alternate — 4.94:1      */
  --color-bark:     #6A4A35;   /* secondary headings — 7.17:1        */
  --color-ink:      #4A2C1A;   /* all text + every glyph — 11.38:1   */

  --color-background:    var(--color-cream);
  --color-surface:       var(--color-shell);
  --color-surface-muted: var(--color-linen);
  --color-border:        var(--color-sand);
  --color-border-strong: var(--color-taupe);
  --color-muted:         var(--color-stone-aa);   /* §18 item 7 */
  --color-text:          var(--color-ink);
  --color-text-inverse:  var(--color-shell);

  /* --- ACTION ------------------------------------------------------------ */
  --color-action-tint:  #F0E3D6;
  --color-action-soft:  #D3BCA9;
  --color-action:       #9C7860;   /* reference fill; shell label 3.81:1 */
  --color-action-aa:    #906C54;   /* accessible alternate — 4.50:1      */
  --color-action-hover: #8E6B55;
  --color-action-deep:  #6E503D;   /* links, wordmark — 6.59:1           */

  /* --- ACCENT — swatch 4. One element per view. -------------------------- */
  --color-accent-tint: #F6E0D4;
  --color-accent-soft: #DFB096;
  --color-accent:      #BA7957;   /* never behind text — 3.18:1 */
  --color-accent-deep: #8F4F31;   /* 5.69:1                     */

  /* --- STATUS — carried by icon + word, not hue (§2.7) ------------------- */
  --color-status-bg: var(--color-linen);
  --color-danger:    #8C3A20;
  --color-danger-bg: var(--color-accent-tint);
  --color-focus:     var(--color-action-deep);

  /* --- DATA VISUALISATION — stepped by lightness, not hue ---------------- */
  --chart-1: #5C4030;  --chart-2: #8E6B55;  --chart-3: #BA7957;
  --chart-4: #C9A98E;  --chart-5: #E2CDB4;

  /* --- TYPOGRAPHY -------------------------------------------------------- */
  --font-display: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --font-body:    'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont,
                  'Segoe UI', Roboto, sans-serif;

  --weight-regular: 400;  --weight-medium: 500;
  --weight-semibold: 600; --weight-bold: 700;

  /* mobile-first; desktop overrides below */
  /* Display sits one tier above Hero and exists only for a page's single
     largest headline. Added 28 Oct 2026 to close the scale gap against the
     reference board; recorded in the master's §3.3 and §16. */
  --size-display: 44px;  --lh-display: 50px;
  --size-hero:    38px;  --lh-hero:    44px;
  --size-h1:      32px;  --lh-h1:      40px;
  --size-h2:      28px;  --lh-h2:      36px;
  --size-h3:      24px;  --lh-h3:      32px;
  --size-h4:      18px;  --lh-h4:      26px;
  --size-h5:      16px;  --lh-h5:      24px;
  --size-body-lg: 17px;  --lh-body-lg: 28px;
  --size-body:    16px;  --lh-body:    26px;
  --size-body-sm: 14px;  --lh-body-sm: 22px;
  --size-caption: 13px;  --lh-caption: 18px;
  --size-eyebrow: 12px;  --lh-eyebrow: 16px;
  --size-button:  16px;  --lh-button:  22px;
  --size-nav:     16px;  --lh-nav:     24px;
  --size-numeric: 40px;  --lh-numeric: 46px;

  --tracking-display: -0.02em;
  --tracking-xl:      -0.025em;   /* Display only — see §3.3 */
  --tracking-heading: -0.01em;
  --tracking-normal:   0;
  --tracking-eyebrow:  0.9px;

  --measure-prose:   640px;
  --measure-lead:    680px;
  --measure-heading: 760px;

  /* Playfair's hard floor — below this, headings are --font-body 600 */
  --display-floor-web: 28px;

  /* --- SPACING ----------------------------------------------------------- */
  --space-2xs:   4px;  --space-xs:   8px;  --space-sm:  16px;
  --space-md:   24px;  --space-lg:  32px;  --space-xl:  40px;
  --space-2xl:  64px;  --space-3xl: 96px;  --space-4xl:128px;

  --page-margin:  24px;
  --section-gap:  64px;
  --card-padding: 16px;
  --grid-gap:     16px;

  /* --- RADIUS ------------------------------------------------------------ */
  --radius-xs:  8px;   --radius-sm:  12px;  --radius-md:   16px;
  --radius-lg:  20px;  --radius-xl:  24px;  --radius-2xl:  32px;
  --radius-pill: 999px; --radius-circle: 50%;

  /* --- ELEVATION — shadow colour is always ink, never black -------------- */
  --shadow-none: none;
  --shadow-sm:   0 2px  8px rgba(74,44,26,.05);
  --shadow-md:   0 4px 20px rgba(74,44,26,.07);
  --shadow-lg:   0 12px 32px rgba(74,44,26,.10);
  --shadow-xl:   0 24px 60px rgba(74,44,26,.14);

  /* --- LAYOUT & CONTROLS -------------------------------------------------- */
  --max-width:        1120px;
  --max-width-narrow:  768px;
  --header-height:      64px;

  --button-height:     48px;  --button-height-lg: 56px;
  --button-height-sm:  40px;  --input-height:     48px;
  --min-tap-target:    44px;
  --icon-size:         24px;  --icon-stroke:    1.5px;
  --icon-chip-size:    48px;
  --mascot-min:        96px;  /* rendered art floor — see §10.3 */

  /* --- MOTION ------------------------------------------------------------ */
  --duration-fast: 160ms;  --duration-base: 240ms;  --duration-slow: 400ms;
  --ease-standard: cubic-bezier(.4, 0, .2, 1);
  --ease-entrance: cubic-bezier(.16, 1, .3, 1);
  --focus-ring:    3px solid var(--color-focus);
  --focus-offset:  3px;
}

@media (min-width: 761px) {
  :root { --page-margin: 32px; --card-padding: 24px; --grid-gap: 24px;
          --header-height: 72px;
          --size-display: 58px; --lh-display: 62px; }
}

@media (min-width: 1024px) {
  :root {
    --size-display: 76px;  --lh-display: 78px;
    --size-hero:    60px;  --lh-hero:    66px;
    --size-h1:      46px;  --lh-h1:      54px;
    --size-h2:      34px;  --lh-h2:      42px;
    --size-h3:      28px;  --lh-h3:      36px;
    --size-h4:      20px;  --lh-h4:      28px;
    --size-h5:      17px;  --lh-h5:      24px;
    --size-body-lg: 18px;  --lh-body-lg: 30px;
    --size-button:  15px;  --lh-button:  20px;
    --size-nav:     15px;  --lh-nav:     20px;
    --size-numeric: 44px;  --lh-numeric: 50px;
    --section-gap:  96px;
  }
}

@media (prefers-reduced-motion: reduce) {
  :root { --duration-fast: 1ms; --duration-base: 1ms; --duration-slow: 1ms; }
}