/**
 * ============================================================================
 * DESIGN TOKENS — the single source of truth for the whole design system.
 * ============================================================================
 *
 * HOW A DESIGN SYSTEM IS BUILT (the lesson for the junior):
 *
 *   Figma  →  PRIMITIVE tokens  →  SEMANTIC tokens  →  used everywhere
 *
 *   1. In Figma you pick a raw palette: a brand hue with a 50→900 scale, a
 *      neutral scale, and status hues (success/warning/danger/info). Those raw
 *      values are the PRIMITIVE tokens (Tier 1) below — named by what they ARE
 *      (`--clay-500`), never by where they're used. You almost never reference
 *      these directly in components.
 *
 *   2. You then map primitives to SEMANTIC tokens (Tier 2) — named by their
 *      ROLE (`--color-primary`, `--color-surface`, `--text-strong`). Components
 *      only ever use these. Rebrand = repoint the semantic layer at a different
 *      primitive; every screen updates at once, and dark mode is just a second
 *      set of semantic values.
 *
 *   3. Tailwind (Play CDN, configured in index.html) maps its utility names to
 *      these same CSS variables — so `bg-primary`, `text-strong`,
 *      `border-subtle`, `rounded-md` all resolve to the tokens here. There is
 *      ONE source of truth (this file); Tailwind and hand-written CSS both read
 *      from it. Nothing is hardcoded anywhere else.
 *
 * See docs/design-system.md for the full write-up and the Tailwind-config
 * mapping, and the in-app Design System page (#/design-system) for a living
 * reference rendered from these very tokens.
 * ============================================================================
 */

:root {
  /* ==========================================================================
   * TIER 1 — PRIMITIVE TOKENS (raw palette + raw scales). Named by what they
   * are. Think: "the Figma styles". Don't use these directly in components.
   * ======================================================================== */

  /* Brand hue: "Clay" — a construction terracotta. 50 (lightest) → 900. */
  --clay-50: #fbf1ea;
  --clay-100: #f6e7dd;
  --clay-200: #ecc9b3;
  --clay-300: #e0a985;
  --clay-400: #cf7d4d;
  --clay-500: #b4531f; /* brand base */
  --clay-600: #9f4819;
  --clay-700: #8f3f13;
  --clay-800: #6f3110;
  --clay-900: #4f240d;

  /* Neutral hue: "Sand" — warm greys for text, surfaces, borders. */
  --sand-50: #faf8f4;
  --sand-100: #f4f2ee;
  --sand-200: #e3ded5;
  --sand-300: #cfc7b8;
  --sand-400: #b3aa98;
  --sand-500: #938c7e;
  --sand-600: #6d675c;
  --sand-700: #4c473f;
  --sand-800: #302c26;
  --sand-900: #23201b;
  --white: #ffffff;

  /* Status hues (success / warning / danger / info), each base + soft tint. */
  --green-500: #2f7a44;
  --green-100: #e2f0e5;
  --amber-500: #b7791f;
  --amber-100: #f8eed6;
  --red-500: #b3261e;
  --red-100: #f7dedb;
  --blue-500: #4a7a8c;
  --blue-100: #e4eef2;

  /* Raw spacing scale (4px base) — the only place pixel spacing is defined. */
  --space-0: 0;
  --space-1: 0.25rem; /* 4px  */
  --space-2: 0.5rem; /* 8px  */
  --space-3: 0.75rem; /* 12px */
  --space-4: 1rem; /* 16px */
  --space-5: 1.5rem; /* 24px */
  --space-6: 2rem; /* 32px */
  --space-8: 3rem; /* 48px */

  /* Raw type scale. */
  --font-sans: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.375rem;
  --text-2xl: 1.75rem;
  --leading-tight: 1.25;
  --leading-normal: 1.5;
  --weight-normal: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;

  /* Raw radii, border, shadow, motion. */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --border-width: 1px;
  --shadow-sm: 0 1px 2px rgba(35, 32, 27, 0.06);
  --shadow-md: 0 4px 14px rgba(35, 32, 27, 0.1);
  --shadow-lg: 0 12px 32px rgba(35, 32, 27, 0.16);
  --transition-fast: 120ms ease;
  --transition-base: 200ms ease;

  /* Layout constants. */
  --sidebar-width: 17rem;
  --content-max-width: 80rem; /* ~1280px content frame */
  --header-height: 3.5rem;

  /* ==========================================================================
   * TIER 2 — SEMANTIC TOKENS (role-based). Named by their JOB. Components and
   * Tailwind use ONLY these. To rebrand or theme, repoint these at other
   * primitives — nothing else changes.
   * ======================================================================== */

  /* Surfaces & text */
  --color-bg: var(--sand-100);
  --color-surface: var(--white);
  --color-surface-2: var(--sand-50);
  --color-border: var(--sand-200);
  --color-border-strong: var(--sand-300);
  --color-text: var(--sand-900);
  --color-text-muted: var(--sand-600);
  --color-text-subtle: var(--sand-500);
  --color-on-primary: var(--white); /* text/icon on a primary-filled surface */

  /* Brand */
  --color-primary: var(--clay-500);
  --color-primary-strong: var(--clay-700);
  --color-primary-soft: var(--clay-100);

  /* Status (role → hue) */
  --color-ok: var(--green-500);
  --color-ok-soft: var(--green-100);
  --color-warning: var(--amber-500);
  --color-warning-soft: var(--amber-100);
  --color-danger: var(--red-500);
  --color-danger-soft: var(--red-100);

  /* Task priority + project status accents (semantic aliases) */
  --color-priority-high: var(--red-500);
  --color-priority-medium: var(--amber-500);
  --color-priority-low: var(--blue-500);
  --color-status-active: var(--green-500);
  --color-status-on_hold: var(--amber-500);
  --color-status-completed: var(--blue-500);
}