/* ============================================================
   Work Directory — Design Tokens v0.1
   ------------------------------------------------------------
   Single source of truth. Every value below replaces a specific
   region of your existing CSS — the "from" column documents
   exactly which legacy value this token retires.

   Load this file FIRST, before any page or component stylesheet.
   ============================================================ */

:root {

  /* ── BRAND ────────────────────────────────────────────────
     The only colors that carry brand identity.
     They are sacred — never tinted, never used as backgrounds
     for body text, never used as a decorative gradient.
     ─────────────────────────────────────────────────────── */

  --brand-green:        #2E7D32;   /* lightened — reconciliation of #0B480B + #207B15, more alive */
  --brand-green-deep:   #1B5E20;   /* hero/footer slabs */
  --brand-green-tint:   #EAF4EB;   /* hover surface for green nav items */
  --brand-orange:       #E55A00;   /* from #FD6301, desaturated for AA contrast on white */
  --brand-orange-hover: #C94F00;

  /* ── INK (text) ───────────────────────────────────────────
     Three shades of dark. Anything outside this is wrong.
     ─────────────────────────────────────────────────────── */

  --ink-1: #1A1F2A;   /* primary text, headings */
  --ink-2: #4B5563;   /* secondary text, body copy on long blocks */
  --ink-3: #8A93A1;   /* tertiary text, metadata, counts */

  /* ── SURFACE ──────────────────────────────────────────────
     Three backgrounds. White is white. Everything else is a tint.
     ─────────────────────────────────────────────────────── */

  --surface-0: #FFFFFF;   /* page background, cards */
  --surface-1: #F7F8FA;   /* recessed regions, hover */
  --surface-2: #EEF1F4;   /* table row hover, disabled */

  /* ── LINE ─────────────────────────────────────────────────
     Two hairlines. That's all.
     ─────────────────────────────────────────────────────── */

  --line-1: #E5E8EC;
  --line-2: #CBD1D9;

  /* ── STATUS ───────────────────────────────────────────────
     Used only for system state, never decoration.
     ─────────────────────────────────────────────────────── */

  --status-success: #1F7A4D;
  --status-warning: #B25E00;
  --status-danger:  #B81E1E;
  --status-info:    #1F4F8B;

  /* ── TYPOGRAPHY ───────────────────────────────────────────
     ONE family. THREE weights. SIX sizes. TWO line-heights.
     Replaces: 20 font-family declarations, 67 font-sizes.
     ─────────────────────────────────────────────────────── */

  --font-sans: "Noto Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;

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

  --size-xs:   12px;    /* metadata, counts, table column heads */
  --size-sm:   13.5px;  /* secondary UI labels */
  --size-md:   15px;    /* body — DEFAULT */
  --size-lg:   18px;    /* lead paragraphs, large list items */
  --size-xl:   24px;    /* section titles */
  --size-2xl:  36px;    /* page titles (h1) */

  --leading-tight: 1.2;
  --leading-body:  1.55;

  /* ── SPACING (4px base) ───────────────────────────────────
     Six stops. If your spacing isn't on this scale, it's wrong.
     Replaces: every inline px value that wasn't on a grid.
     ─────────────────────────────────────────────────────── */

  --space-1:   4px;
  --space-2:   8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-6:  24px;
  --space-8:  32px;
  --space-12: 48px;
  --space-16: 64px;

  /* ── RADIUS ───────────────────────────────────────────────
     Replaces 21 different radius values with 2.
     ─────────────────────────────────────────────────────── */

  --radius-sm: 4px;    /* inputs, buttons, chips, cards */
  --radius-pill: 999px;

  /* ── ELEVATION ────────────────────────────────────────────
     Two shadows. One for "this floats above the page"
     (search bar, modal). One for "this is a hovered card."
     Replaces 22 different shadow declarations.
     ─────────────────────────────────────────────────────── */

  --shadow-1: 0 1px 0 var(--line-1);
  --shadow-2: 0 8px 24px -12px rgba(26, 31, 42, 0.16),
              0 2px 6px -2px rgba(26, 31, 42, 0.06);

  /* ── MOTION ───────────────────────────────────────────────
     One duration, one easing. Used only for state changes
     (hover, focus, expand). Never for entrance animations.
     ─────────────────────────────────────────────────────── */

  --duration: 120ms;
  --easing:   cubic-bezier(0.2, 0.6, 0.2, 1);
}