/* ==========================================================================
   OCD Live — design tokens (Charte graphique v1.0, section 6.1)
   Single source of truth: no hex value anywhere else in the app.
   Layers: 1. primitives (ramps)  2. semantic tokens  3. component tokens.
   ========================================================================== */

:root {
  /* ---------- 1. Primitives ---------- */
  /* Orange OCD — sampled from the logo ribbon (#F85800 – #F88000) */
  --orange-50: #FFF4EB;
  --orange-100: #FFE6D3;
  --orange-200: #FFC9A3;
  --orange-300: #FFA56B;
  --orange-400: #FF7A2E;
  --orange-500: #F86000; /* primaire */
  --orange-600: #DB5200;
  --orange-700: #B84400; /* texte orange sur clair (5,43:1) */
  --orange-800: #8F3500;
  --orange-900: #5E2300;
  --ambre-logo: #FF8A00; /* reflet du ruban — dégradé réservé au logo et au marketing */

  /* Encre — the "Live" ink of the logo */
  --encre: #040C14;

  /* Ardoise — neutrals tinted toward the ink (hue ≈ 212°) */
  --ardoise-50: #F6F7F9;
  --ardoise-100: #EEF0F3;
  --ardoise-200: #DFE3E8;
  --ardoise-300: #C4CAD3;
  --ardoise-400: #9AA3B0;
  --ardoise-500: #646D7B;
  --ardoise-600: #4B5361;
  --ardoise-700: #343B47;
  --ardoise-800: #1E242D;
  --ardoise-900: #141A22;
  --ardoise-950: #0B1017;

  /* ---------- 2. Semantic tokens (light) ---------- */
  --background: var(--ardoise-50);
  --foreground: var(--ardoise-800);
  --card: #FFFFFF;
  --card-foreground: var(--ardoise-800);
  --popover: #FFFFFF;
  --popover-foreground: var(--ardoise-800);
  --primary: var(--orange-500);
  --primary-foreground: #FFFFFF;
  --primary-text: var(--orange-700);
  --primary-soft: var(--orange-50);
  --secondary: var(--ardoise-200);
  --secondary-foreground: var(--ardoise-800);
  --muted: var(--ardoise-100);
  --muted-foreground: var(--ardoise-500);
  --accent: var(--ardoise-200);
  --accent-foreground: var(--ardoise-800);
  --border: var(--ardoise-200);
  --input: var(--ardoise-200);
  --ring: var(--orange-500);
  --action: var(--encre);
  --action-foreground: #FFFFFF;
  --icon: var(--ardoise-500);
  --icon-hover: var(--ardoise-800);
  --disabled: var(--ardoise-100);
  --disabled-foreground: var(--ardoise-400);
  --success: #16A34A;
  --success-text: #15803D;
  --success-soft: #E8F6EC;
  --destructive: #DC2626;
  --destructive-foreground: #FFFFFF;
  --destructive-text: #B91C1C;
  --destructive-soft: #FDECEC;
  --warning: #EAB308;
  --warning-text: #A16207;
  --warning-soft: #FEF9C3;
  --sidebar: var(--ardoise-100);
  --radius: 0.625rem;
  --card-shadow: 0 1px 2px 0 rgb(4 12 20 / 0.05), 0 6px 16px -6px rgb(4 12 20 / 0.09);

  /* ---------- 3. Component tokens ---------- */
  --font-sans: "Montserrat", "Segoe UI", system-ui, sans-serif;
  --control-height: 2.75rem;      /* 44 px — cible tactile mobile */
  --control-height-sm: 2.25rem;   /* 36 px */
  --header-height: 4rem;
  --duration-micro: 80ms;
  --duration-quick: 150ms;
  --duration-fast: 250ms;
  --duration-slow: 400ms;
  --ease-smooth-out: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ---------- Dark theme: same names, other values (not an inversion) ---------- */
:root[data-theme="dark"] {
  --background: var(--ardoise-950);
  --foreground: var(--ardoise-50);
  --card: var(--ardoise-900);
  --card-foreground: var(--ardoise-50);
  --popover: var(--ardoise-900);
  --popover-foreground: var(--ardoise-50);
  --primary: var(--orange-500);
  --primary-foreground: #FFFFFF;
  --primary-text: var(--orange-400);
  --primary-soft: #2A1607;
  --secondary: var(--ardoise-800);
  --secondary-foreground: var(--ardoise-50);
  --muted: var(--ardoise-800);
  --muted-foreground: var(--ardoise-400);
  --accent: var(--ardoise-700);
  --accent-foreground: var(--ardoise-50);
  --border: var(--ardoise-700);
  --input: var(--ardoise-700);
  --action: #FFFFFF;
  --action-foreground: var(--encre);
  --icon: var(--ardoise-400);
  --icon-hover: var(--ardoise-50);
  --disabled: var(--ardoise-800);
  --disabled-foreground: var(--ardoise-600);
  --success: #4ADE80;
  --success-text: #4ADE80;
  --success-soft: #12301D;
  --destructive-text: #F87171;
  --destructive-soft: #3A1618;
  --warning: #FACC15;
  --warning-text: #FACC15;
  --warning-soft: #3A320B;
  --sidebar: var(--ardoise-900);
  --card-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.4);
}