/* ═══════════════════════════════════════════════════════════════════
   TOKENS.CSS · Foundation Layer
   ───────────────────────────────────────────────────────────────────
   Shared design tokens used across every app in the suite.
   Per-app theming is handled by theme-*.css files that override
   the accent ramp variables only. Everything else lives here.
   
   Load order:
     1. tokens.css          (this file)
     2. theme-[name].css    (one theme per app)
     3. components.css      (component styles)
   
   Version 1.0 · April 2026
   ═══════════════════════════════════════════════════════════════════ */


:root {

  /* ─── Surfaces · Day ─────────────────────────────────────────── */
  --surface-page:        #F4F1EB;   /* Bone · page canvas */
  --surface-elevated:    #EFEADF;   /* Clay Light · nav, topbar */
  --surface-flat:        #EAE6DC;   /* Clay · borderless cards */
  --surface-raised:      #FBFAF6;   /* Linen · raised cards */
  --surface-divider:     #D9D3C4;   /* Clay Deep · inset wells */

  /* ─── Text · Day ─────────────────────────────────────────────── */
  --text-primary:        #1F1E1A;   /* Ink · 16.1:1 on bone */
  --text-secondary:      #5A5548;   /* Stone · 8.1:1 on bone */
  --text-tertiary:       #8A8578;   /* Ash · 4.7:1 on bone · AA */
  --text-muted:          #B8B09C;   /* Mist · 2.6:1 · display only, never below 18px */
  --text-on-dark:        #F4F1EB;   /* Bone used as text on ink surfaces */

  /* ─── Borders · Day ──────────────────────────────────────────── */
  --border-rest:         #D9D3C4;   /* 0.5px default */
  --border-hover:        #8A8578;   /* 0.5px interactive hover */
  --border-selected:     #1F1E1A;   /* 1px selected / active */

  /* ─── Spacing scale ──────────────────────────────────────────── */
  --space-1:             4px;
  --space-2:             8px;
  --space-3:             12px;
  --space-4:             16px;
  --space-5:             20px;
  --space-6:             24px;
  --space-8:             32px;
  --space-10:            40px;
  --space-12:            48px;
  --space-16:            64px;

  /* ─── Radii ──────────────────────────────────────────────────── */
  --radius-sm:           2px;       /* checkbox */
  --radius-md:           4px;       /* buttons, inputs, small cards */
  --radius-lg:           8px;       /* standard cards */
  --radius-xl:           10px;      /* composite cards */
  --radius-pill:         9999px;    /* badges, toggles, status pills */

  /* ─── Typography ─────────────────────────────────────────────── */
  --font-sans:           'Satoshi', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;

  --weight-regular:      400;
  --weight-medium:       500;

  --size-display:        44px;
  --size-title:          22px;
  --size-heading:        14px;
  --size-body:           13px;
  --size-small:          12px;
  --size-tiny:           11px;
  --size-label:          10px;
  --size-eyebrow:        9.5px;

  --track-display:       -0.035em;
  --track-title:         -0.02em;
  --track-body:          -0.005em;
  --track-eyebrow:       0.18em;
  --track-uppercase:     0.14em;

  --line-heading:        1.05;
  --line-body:           1.6;
  --line-tight:          1;

  /* ─── Motion ─────────────────────────────────────────────────── */
  --ease:                cubic-bezier(0.2, 0, 0, 1);

  --motion-micro:        120ms;     /* hover, focus, toggle */
  --motion-short:        200ms;     /* cards, borders, buttons */
  --motion-medium:       380ms;     /* panels, drawers, reveals */
  --motion-long:         560ms;     /* page transitions, staggered reveals */
  --motion-breath:       2400ms;    /* life-pulse indicator */

  /* ─── Grain (applied to canvas only) ─────────────────────────── */
  --grain-opacity:       0.04;

  /* ─── Semantic colors (status) ───────────────────────────────── */
  --status-live:         #4B6B5A;   /* same as moss accent */
  --status-paused:       #8A8578;   /* ash */
  --status-processing:   #2E5266;   /* slate */
  --status-attention:    #B89060;   /* honey */
  --status-error:        #8A2E2E;   /* cinnabar */
  --status-draft:        #B8B09C;   /* mist */

  /* ─── Badge pigments (day) ───────────────────────────────────── */
  --badge-approved-bg:   #DCE4D3;
  --badge-approved-bd:   #B4C5A5;
  --badge-approved-tx:   #2E4A38;

  --badge-progress-bg:   #F0E4C8;
  --badge-progress-bd:   #D4BE88;
  --badge-progress-tx:   #6B5020;

  --badge-rejected-bg:   #EFD4D2;
  --badge-rejected-bd:   #D4A0A0;
  --badge-rejected-tx:   #6B1A1A;

  --badge-draft-bg:      #EAE1D0;
  --badge-draft-bd:      #C8B894;
  --badge-draft-tx:      #3A3028;

  --badge-neutral-bg:    #EAE6DC;
  --badge-neutral-tx:    #1F1E1A;

  /* ─── Layout dimensions ──────────────────────────────────────── */
  --nav-width:           180px;
  --nav-collapsed:       52px;
  --topbar-height:       44px;

  /* ─── Accent variables (set by theme files, defaults to moss) ── */
  --accent:              #4B6B5A;
  --accent-2:            #718C73;
  --accent-3:            #9AAE8B;
  --accent-4:            #C1A87A;
  --accent-5:            #7A5E3A;
  --accent-name:         'moss';
}


/* ═══════════════════════════════════════════════════════════════════
   Dark mode · Night
   Activated by `data-theme="night"` on <html> or <body>.
   ═══════════════════════════════════════════════════════════════════ */

[data-theme="night"] {

  /* ─── Surfaces · Night (inverted logic: raised goes deeper) ──── */
  --surface-page:        #1A1815;   /* Soil · page canvas */
  --surface-elevated:    #232019;   /* Loam Light · nav, topbar */
  --surface-flat:        #2A261E;   /* Loam · borderless cards */
  --surface-raised:      #1F1D17;   /* Hollow · raised cards (darker — looking into shadow) */
  --surface-divider:     #2E2C27;   /* Loam Deep · dividers */

  /* ─── Text · Night ───────────────────────────────────────────── */
  --text-primary:        #F0EDE3;   /* Parchment · 14.8:1 on soil */
  --text-secondary:      #C4BEB0;   /* Flax · 8.4:1 on soil */
  --text-tertiary:       #8E887A;   /* Dusk · 4.9:1 on soil · AA */
  --text-muted:          #5A5448;   /* Ember · display only */
  --text-on-dark:        #1A1815;   /* Soil used as text on bright accent fills */

  /* ─── Borders · Night ────────────────────────────────────────── */
  --border-rest:         #2E2C27;
  --border-hover:        #8E887A;
  --border-selected:     #F0EDE3;

  /* ─── Grain ─────────────────────────────────────────────────── */
  --grain-opacity:       0.06;

  /* ─── Status (night) ─────────────────────────────────────────── */
  --status-live:         var(--accent);
  --status-paused:       #8E887A;
  --status-processing:   #7BA0B8;
  --status-attention:    #D4A878;
  --status-error:        #C87070;
  --status-draft:        #5A5448;

  /* ─── Badge pigments (night) ─────────────────────────────────── */
  --badge-approved-bg:   #2A3A2E;
  --badge-approved-bd:   #4A6B55;
  --badge-approved-tx:   #B4C5A5;

  --badge-progress-bg:   #3A2F1A;
  --badge-progress-bd:   #6B5020;
  --badge-progress-tx:   #D4BE88;

  --badge-rejected-bg:   #3A1F1E;
  --badge-rejected-bd:   #6B2E2C;
  --badge-rejected-tx:   #D4A0A0;

  --badge-draft-bg:      #2A2620;
  --badge-draft-bd:      #4A4238;
  --badge-draft-tx:      #C4BEB0;

  --badge-neutral-bg:    #2A261E;
  --badge-neutral-tx:    #F0EDE3;
}


/* ═══════════════════════════════════════════════════════════════════
   Respect user preference for reduced motion
   ═══════════════════════════════════════════════════════════════════ */

@media (prefers-reduced-motion: reduce) {
  :root {
    --motion-micro:   0ms;
    --motion-short:   0ms;
    --motion-medium:  0ms;
    --motion-long:    0ms;
  }
}