/* =========================================================================
   SECTION: Design tokens
   Single source of truth for colour, type, spacing, radius, shadow.
   Every component file uses var(--token) — no raw hex outside this file.
   ========================================================================= */

:root {
  /* --- Brand colour ------------------------------------------------------ */
  --color-primary: #454C54;
  --color-primary-hover: #363B42;
  --color-secondary: #8C96A0;
  --color-success: #00E676;
  --color-success-ink: #05612f;
  --color-danger: #FF3B30;
  --color-danger-ink: #a51810;

  /* --- Surfaces -------------------------------------------------------- */
  --bg-page: #FFFFFF;
  --bg-alt: #F8FAFC;         /* slate-50, alternating public sections */
  --bg-dashboard: #F1F5F9;   /* slate-100, dashboard canvas */
  --bg-card: #FFFFFF;
  --bg-inset: #F1F5F9;

  /* --- Text ---------------------------------------------------------- */
  --text-primary: #0F172A;
  --text-secondary: #475569;
  --text-heading-3: #1E293B;
  --text-on-primary: #FFFFFF;
  --text-muted: #64748B;

  /* --- Lines ---------------------------------------------------------- */
  --border: #E2E8F0;
  --border-strong: #CBD5E1;
  --border-on-dark: rgba(255, 255, 255, 0.16);

  /* --- Typography --------------------------------------------------- */
  --font-ui: "Inter", "Geist", system-ui, -apple-system, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
  --font-heading: "Plus Jakarta Sans", "Inter", system-ui, -apple-system,
    "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, "SFMono-Regular", "Cascadia Code", Menlo, Consolas,
    monospace;

  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --fw-extrabold: 800;

  /* --- Radius ------------------------------------------------------- */
  --radius-sm: 0.375rem;
  --radius-md: 0.5rem;   /* buttons, inputs */
  --radius-lg: 0.75rem;  /* cards, modals */
  --radius-pill: 999px;

  /* --- Shadow (matches Tailwind default scale) --------------------- */
  --shadow-sm: 0 1px 2px 0 rgba(15, 23, 42, 0.05);
  --shadow-md: 0 4px 6px -1px rgba(15, 23, 42, 0.1), 0 2px 4px -2px rgba(15, 23, 42, 0.1);
  --shadow-lg: 0 10px 15px -3px rgba(15, 23, 42, 0.1), 0 4px 6px -4px rgba(15, 23, 42, 0.1);
  --shadow-xl: 0 20px 25px -5px rgba(15, 23, 42, 0.1), 0 8px 10px -6px rgba(15, 23, 42, 0.1);
  --shadow-2xl: 0 25px 50px -12px rgba(15, 23, 42, 0.25);

  /* --- Spacing scale --------------------------------------------- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;

  /* --- Layout ---------------------------------------------------- */
  --container-max: 80rem;
  --container-pad: 1rem;
  --container-pad-lg: 2rem;
  --measure: 42rem;          /* readable line length for prose/legal */
  --section-y: 5rem;
  --section-y-lg: 8rem;
  --sidebar-w: 280px;
  --topbar-h: 64px;

  /* --- Focus ring (spec: 4px translated slate) ------------------- */
  --focus-ring: 0 0 0 4px rgba(148, 163, 184, 0.4);
  --focus-ring-input: 0 0 0 2px var(--color-primary);

  /* --- Motion --------------------------------------------------- */
  --transition-fast: 0.15s ease;
  --transition: 0.2s ease;

  /* --- Z-index scale ----------------------------------------------- */
  --z-header: 40;
  --z-sidebar: 30;
  --z-dropdown: 50;
  --z-modal: 100;
  --z-toast: 120;
}