/* §7.8b — the only place raw color values may live.
   Extended for W1 (the web surface). Palette stays GrowLab's own: evergreen/pine/sprout/lime on paper.
   Semantic names are what components reference; raw hex is never used outside this file.
   Direction B "Modern Depth" applied — Item 122.2 (2026-10-03). */
:root{
  /* brand */
  --evergreen:#123B2A; --pine:#1C5940; --sprout:#3FA36C; --lime:#D8F26E;
  --paper:#F6F5EF; --ink:#14201A;

  /* surfaces — Direction B depth system */
  --surface:#F3F1E8; --surface-raised:#FAFAF6; --surface-sunken:#E8E5D8;
  --surface-glass:rgba(255,255,255,.72); --surface-glass-border:rgba(255,255,255,.6);
  --surface-deep:#0E2D1F; --surface-overlay:rgba(18,59,42,.05);
  --line:#D4D1C3; --line-strong:#B8B4A6; --line-glass:rgba(255,255,255,.4);

  /* text — contrast checked against --surface for WCAG 2.1 AA (4.5:1 body, 3:1 large) */
  --text:#14201A; --text-muted:#4F5F58; --text-subtle:#656E67; --text-on-dark:#F6F5EF;

  /* semantic states — never colour alone (promax a11y: pair with icon or text) */
  --ok:#1A7F5A; --ok-soft:rgba(63,163,108,.10);
  --warn:#B45309; --warn-soft:rgba(180,83,9,.10);
  --danger:#B91C1C; --danger-soft:rgba(185,28,28,.12);
  --info:#1C5940; --info-soft:#E7F0EB;
  /* Direction B semantic aliases */
  --success:var(--ok); --success-bg:var(--ok-soft);
  --warn-bg:var(--warn-soft); --danger-bg:var(--danger-soft);

  /* focus — Direction B: sprout-based for better visibility on new surfaces */
  --focus:#3FA36C; --focus-ring:rgba(63,163,108,.45); --focus-width:3px;

  /* type scale — Direction B (16px base, 1.2 ratio) */
  --fs-xs:12px; --fs-sm:14px; --fs-base:16px; --fs-md:19px; --fs-lg:24px; --fs-xl:30px; --fs-2xl:38px;
  --lh-tight:1.2; --lh-body:1.65; --lh-arabic:1.85;

  /* spacing (4px base — Direction B rhythm) */
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:20px; --sp-6:24px;
  --sp-8:32px; --sp-10:40px; --sp-12:48px; --sp-16:64px;

  /* radius */
  --r-sm:10px; --r-md:16px; --r-lg:24px; --r-xl:32px; --r-full:9999px;

  /* elevation — Direction B multi-layer shadow system */
  --shadow-glass:0 8px 32px rgba(18,59,42,.12),0 2px 8px rgba(18,59,42,.08),inset 0 1px 0 rgba(255,255,255,.6);
  --shadow-card:0 4px 16px rgba(18,59,42,.10),0 1px 4px rgba(18,59,42,.07);
  --shadow-raised:0 12px 40px rgba(18,59,42,.14),0 4px 12px rgba(18,59,42,.09);
  --shadow-deep:0 24px 64px rgba(18,59,42,.22),0 8px 24px rgba(18,59,42,.14);
  --shadow-1:var(--shadow-card); --shadow-2:var(--shadow-raised);
  --blur-glass:blur(20px) saturate(1.4);

  /* layout */
  --layout-content:680px; --layout-wide:1100px; --layout-sidebar:260px; --touch-min:44px;
  /* form measure — single-line inputs/selects ≤480px; textareas ≤75ch (F132/122.2) */
  --form-measure:480px; --form-measure-prose:75ch;

  /* motion */
  --motion-fast:110ms; --motion:170ms; --motion-slow:360ms;
  --ease:cubic-bezier(.2,.6,.3,1); --ease-out:cubic-bezier(.16,1,.3,1);
  --spring:cubic-bezier(.34,1.56,.64,1);

  /* z-index scale — promax: define one, don't invent per component */
  --z-base:0; --z-sticky:10; --z-overlay:20; --z-modal:30; --z-toast:50;

  /* --color-* aliases: the brand mark SVG uses these names on both the app shell (via app.css
     @theme) and the hero document (via tokens.css). Single raw value here; hero.css must not
     re-define these with a raw hex (ci/meta_check.py: §D1 token gate). */
  --color-paper:var(--paper); --color-sprout:var(--sprout); --color-lime:var(--lime);
}

/* Status dashboard surface (docs/status.html) — dark reading surface, same family as the product tokens */
:root{
  --status-bg:#12141A; --status-panel:#1A1D24; --status-line:#2A2E37;
  --status-ink:#EDEFF2; --status-mute:#8A909B;
  --status-ok:#5FD08A; --status-partial:#E8B84B; --status-todo:#3A3F4A;
}