/* tokens.css — Mesh Design System token layer. Owned by chief-of-staff (design system).
 *
 * Loaded FIRST (before css/base.css) so every stylesheet can opt into these
 * custom properties over time. v1 defines the tokens + flips the global font to
 * Geist via --font-sans (applied in base.css `body`). Existing feature CSS still
 * uses hardcoded hex; migration to var(--token) happens owner-by-owner in later
 * /goal passes — see docs/design.md → Roadmap.
 *
 * Colors are aligned to Erin's brand guideline (Dependable Blue primary, warm
 * Deep Black copy, Extra Reliable Blue sidebar + the full primary/secondary palette).
 * Canonical reference: docs/design.md  ·  Visual showcase: /design_guideline
 *
 * GOVERNANCE: add tokens, never silently rename them. Feature owners reference
 * these; they do not redefine them. Breaking renames route through chief-of-staff.
 */

:root {
  /* ── Typography ─────────────────────────────────────────────── */
  --font-sans: 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: 'Geist Mono', 'SF Mono', 'Menlo', 'Consolas', monospace;

  /* Type scale (px) — the sizes that cover ~95% of the UI */
  --text-xs2: 10px;    /* micro labels, timestamps */
  --text-xs:  11px;    /* secondary labels, captions */
  --text-sm:  12px;    /* body default */
  --text-md:  13px;    /* dense headers */
  --text-base:14px;    /* comfortable body, table cells */
  --text-lg:  16px;    /* card / section titles */
  --text-xl:  18px;    /* sub-page titles */
  --text-2xl: 22px;    /* page titles */
  --text-3xl: 26px;    /* KPI numbers */
  --text-4xl: 38px;    /* hero KPI numbers */

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

  --leading-solid:   1;     /* numbers, badges */
  --leading-tight:   1.25;  /* names, short text */
  --leading-normal:  1.45;  /* body copy */
  --leading-relaxed: 1.6;   /* comments, prose */

  /* ── Color · Brand palette (Erin's brand guideline — source of truth) ──
   * Primary palette: Dependable Blue, Sensible Sky Blue, Trustworthy Tan,
   * Deep Black, Pure White. Secondary palette: four blue shades pulled from
   * the two primary blues. Our semantic tokens (below) map onto these. */
  --color-dependable-blue:   #345def;  /* PRIMARY brand blue */
  --color-sensible-sky:      #c3d7f9;  /* light brand blue (tints, selected bg) */
  --color-trustworthy-tan:   #efeee9;  /* warm neutral background */
  --color-deep-black:        #211f1c;  /* copy / text (warm) */
  --color-pure-white:        #ffffff;
  /* Secondary blues */
  --color-reliable-blue:        #5c8fff;  /* lighter Dependable */
  --color-extra-reliable-blue:  #082f62;  /* deep navy */
  --color-secure-sky:           #90b6f3;  /* mid Sky */
  --color-extra-secure-sky:     #0e52a4;  /* deep Sky */

  /* ── Color · Brand (semantic mapping) ───────────────────────── */
  --color-brand-logo:   #345def;  /* logo mark, "Mesh" wordmark (Dependable Blue) */
  --color-brand-500:    #345def;  /* primary actions, active, links (Dependable Blue) */
  --color-brand-hover:  #2c4fcb;  /* hover/active darken of Dependable Blue */
  --color-brand-accent: #0ea5e9;  /* role accent (reviewer avatar) — functional, not brand */

  /* ── Color · Neutral ramp (warm — text → surface) ───────────── */
  --color-text-strong:  #211f1c;  /* primary text (Deep Black) */
  --color-text:         #374151;  /* secondary text, hover */
  --color-text-muted:   #6b7280;  /* tertiary text */
  --color-text-subtle:  #9ca3af;  /* labels, hints */
  --color-border-strong:#d1d5db;  /* heavier separators */
  --color-border:       #e5e7eb;  /* standard border */
  --color-surface-2:    #f3f4f6;  /* hover fill */
  --color-surface-1:    #f9fafb;  /* grouped section fill */
  --color-surface-0:    #ffffff;  /* cards, base */
  --color-surface-tan:  #efeee9;  /* warm page canvas (Trustworthy Tan) */
  --color-sidebar:      #082f62;  /* dark sidebar rail (Extra Reliable Blue) */

  /* ── Color · Semantic (foreground) ──────────────────────────── */
  --color-success:   #16a34a;  /* active / approved */
  --color-success-2: #10b981;  /* preparer accent */
  --color-danger:    #dc2626;  /* failed / blocked */
  --color-warning:   #d97706;  /* draft / pending */
  --color-info:      #345def;  /* informational (== brand-500) */

  /* ── Color · Semantic (tinted backgrounds for pills/badges) ─── */
  --bg-success: #f0fdf4;  --bg-success-strong: #dcfce7;
  --bg-danger:  #fef2f2;  --bg-danger-strong:  #fee2e2;
  --bg-warning: #fffbeb;  --bg-warning-strong: #fef3c7;
  --bg-info:    #eff6ff;  --bg-info-strong:    #eef2ff;

  /* ── Spacing scale (px) ─────────────────────────────────────── */
  --space-1: 4px;   --space-2: 6px;   --space-3: 8px;   --space-4: 10px;
  --space-5: 12px;  --space-6: 14px;  --space-7: 16px;  --space-8: 20px;
  --space-9: 24px;  --space-10: 28px; --space-11: 32px; --space-12: 40px;
  --space-13: 48px;

  /* ── Radius tiers ───────────────────────────────────────────── */
  --radius-control: 6px;    /* buttons, inputs (5–7 range) */
  --radius-card:    12px;   /* cards, modals (10–12 range) */
  --radius-pill:    999px;  /* pills, fully-round chips */

  /* ── Elevation / shadow tiers ───────────────────────────────── */
  --shadow-subtle: 0 1px 2px rgba(0,0,0,0.06);
  --shadow-raised: 0 6px 20px rgba(0,0,0,0.12);
  --shadow-modal:  0 12px 32px rgba(0,0,0,0.18);
  --focus-ring:    0 0 0 3px rgba(52,93,239,0.12);

  /* ── Motion easings (paired duration + curve) ───────────────── */
  --ease-overlay: cubic-bezier(0.32, 0.72, 0, 1);   /* right drawer · 0.24s */
  --ease-slide:   cubic-bezier(0.22, 1, 0.36, 1);   /* chat width slide · 0.32s */
  --ease-standard: ease;                            /* checklist drawer · 0.22s */
  --dur-fast:  0.12s;
  --dur-base:  0.22s;
  --dur-slow:  0.32s;
}