/*
 * Time-Check design system — tokens (October 2026)
 * Logo D "the clock that validates" + palette 07 "Cobalt & Givre".
 * Source of truth: design-system/DESIGN.md. Do not invent new colours; extend this file instead.
 *
 * Two layers:
 *   1. --tc-*  primitives (brand names, never used for meaning)
 *   2. semantic aliases with the SAME NAMES the existing stylesheets already use
 *      (--bg, --surface, --ink, --primary, --warning…), so swapping the old
 *      forest/lime :root block for this file restyles existing components.
 */

:root {
  /* ---------- 1. Primitives ---------- */
  --tc-cobalt: #1f4bff;        /* brand blue: primary actions, logo, "complete/validated" */
  --tc-cobalt-700: #1838cc;    /* hover / pressed */
  --tc-cobalt-300: #4d74ff;    /* logo rim and primary on dark backgrounds */
  --tc-givre: #a8c4ff;         /* ice blue accent, pivot dot on white */
  --tc-givre-200: #bfd3ff;     /* "check" in the wordmark on dark / cobalt */
  --tc-ciel: #dce6ff;          /* active fills, avatars */
  --tc-ciel-100: #e6edff;      /* "complete" badge background */
  --tc-brume: #f1f5ff;         /* tinted sections, hover rows */
  --tc-brume-50: #f7f9ff;      /* app background, table headers */
  --tc-white: #ffffff;
  --tc-nuit: #07112b;          /* text, dark surfaces, footer */
  --tc-nuit-800: #0d1a3f;      /* raised dark surface */
  --tc-ardoise-700: #3a4668;   /* nav text */
  --tc-ardoise: #4a5677;       /* secondary text */
  --tc-ardoise-400: #5a6385;   /* captions, labels in mono */
  --tc-gris: #8a93b5;          /* disabled, placeholders */
  --tc-bordure: #d7e0f5;       /* input borders */
  --tc-bordure-soft: #e1e8f8;  /* card borders, dividers */
  --tc-ambre: #c26a00;         /* warning (missing punch) */
  --tc-ambre-ink: #9a4a00;
  --tc-ambre-soft: #fff4e5;
  --tc-rouge: #d92d20;         /* error / blocking */
  --tc-rouge-ink: #b42318;
  --tc-rouge-soft: #fef0ef;
  --tc-ceruleen: #0077c8;      /* information (distinct from "complete") */
  --tc-ceruleen-soft: #eef6fc;
  --tc-iris: #5a4bff;          /* system admin / "view as employer" marker */
  --tc-iris-soft: #f1efff;

  /* ---------- Typography ---------- */
  --font-ui: 'Sora', 'Avenir Next', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono: 'DM Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --tracking-display: -0.04em;   /* headings ≥ 28px and the wordmark */
  --tracking-title: -0.02em;     /* 18–24px titles */

  /* ---------- 2. Semantic aliases (existing names) ---------- */
  --bg: var(--tc-brume-50);
  --bg-side: var(--tc-white);
  --surface: var(--tc-white);
  --surface-2: var(--tc-brume);
  --surface-3: var(--tc-ciel-100);
  --ink: var(--tc-nuit);
  --ink-2: var(--tc-ardoise-700);
  --ink-3: var(--tc-ardoise);
  --ink-4: var(--tc-gris);
  --line: var(--tc-bordure-soft);
  --line-2: var(--tc-bordure);
  --border: var(--line);

  --primary: var(--tc-cobalt);
  --primary-strong: var(--tc-cobalt-700);
  --primary-hover: var(--tc-cobalt-700);
  --primary-soft: var(--tc-ciel-100);
  --primary-ink: var(--tc-cobalt-700);
  --on-primary: #fff;
  --accent: var(--tc-givre);
  --navy: var(--tc-nuit);
  --teal: var(--tc-ceruleen);

  /* "Complete / validated" is the brand blue with a check, never green. */
  --success: var(--tc-cobalt);
  --success-soft: var(--tc-ciel-100);
  --success-ink: var(--tc-cobalt-700);
  --warning: var(--tc-ambre);
  --warning-soft: var(--tc-ambre-soft);
  --warning-ink: var(--tc-ambre-ink);
  --danger: var(--tc-rouge);
  --danger-soft: var(--tc-rouge-soft);
  --danger-ink: var(--tc-rouge-ink);
  --info: var(--tc-ceruleen);
  --info-soft: var(--tc-ceruleen-soft);
  --info-ink: #005fa3;
  --admin: var(--tc-iris);
  --admin-soft: var(--tc-iris-soft);
  --admin-ink: #4436d6;

  /* Focus: cobalt border + 4px halo on fields; 3px givre outline on buttons/links. */
  --ring: 0 0 0 4px rgba(31, 75, 255, 0.14);
  --focus-outline: 3px solid var(--tc-givre);

  /* ---------- Shape & depth ---------- */
  --r-1: 10px;    /* small buttons, menu items */
  --r-2: 12px;    /* buttons and inputs in the app */
  --r-3: 20px;    /* cards */
  --r-4: 24px;    /* dialogs, large panels */
  --r-pill: 999px;/* badges, chips, segmented controls, marketing-site buttons */
  --shadow-1: 0 2px 8px -2px rgba(7, 17, 43, 0.18);
  --shadow-2: 0 18px 40px -24px rgba(7, 17, 43, 0.45);
  --shadow-3: 0 40px 80px -36px rgba(7, 17, 43, 0.6);
  --shadow-pop: 0 24px 50px -24px rgba(7, 17, 43, 0.45);
  --shadow-primary: 0 12px 34px -14px var(--tc-cobalt);

  /* ---------- Motion ---------- */
  --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-spring: cubic-bezier(0.25, 1.35, 0.4, 1);

  color-scheme: light;
}

:root[data-theme='dark'] {
  --bg: var(--tc-nuit);
  --bg-side: #0a1636;
  --surface: var(--tc-nuit-800);
  --surface-2: #132250;
  --surface-3: #1a2c63;
  --ink: #f1f5ff;
  --ink-2: #c9d4f2;
  --ink-3: #a9b6da;
  --ink-4: #7f8db8;
  --line: #1c2a55;
  --line-2: #2a3b70;
  --border: var(--line);
  --primary: var(--tc-cobalt-300);
  --primary-strong: #6f8dff;
  --primary-hover: #6f8dff;
  --primary-soft: #16245a;
  --primary-ink: var(--tc-givre-200);
  --accent: var(--tc-givre);
  --success: var(--tc-cobalt-300);
  --success-soft: #16245a;
  --success-ink: var(--tc-givre-200);
  --warning: #f0a040;
  --warning-soft: #3a2a10;
  --warning-ink: #ffc27a;
  --danger: #ff6b5e;
  --danger-soft: #3d1614;
  --danger-ink: #ffada5;
  --info: #4fc3ff;
  --info-soft: #0f2a40;
  --info-ink: #9be3ff;
  --ring: 0 0 0 4px rgba(77, 116, 255, 0.3);
  color-scheme: dark;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}