/* ==========================================================================
   RootIT Lab — Design tokens
   Palette extraite de brand/logo.png (voir brand/palette.html et DESIGN.md).
   Pour changer les couleurs du site, modifiez uniquement ce fichier.
   ========================================================================== */

@font-face {
  font-family: "Space Grotesk";
  src: url("../fonts/space-grotesk.woff2") format("woff2");
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("../fonts/inter.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("../fonts/jetbrains-mono.woff2") format("woff2");
  font-weight: 100 800;
  font-style: normal;
  font-display: swap;
}

:root {
  /* --- Rouge « Root » (primaire) — #F0101D extrait du logo = red-500 ------ */
  --red-50: #fff4f2;
  --red-100: #ffe4e0;
  --red-200: #ffc8c1;
  --red-300: #ffa195;
  --red-400: #ff6b5f;
  --red-500: #f0101d;
  --red-600: #d80015;
  --red-700: #ad000e;
  --red-800: #810008;
  --red-900: #580003;
  --red-950: #310705;

  /* --- Acier (secondaire / neutres) — gris métal du logo ------------------ */
  --steel-50: #f5f7f9;
  --steel-100: #e9ebee;
  --steel-200: #d5d8db;
  --steel-300: #bbbec2;
  --steel-400: #9ea2a6;
  --steel-500: #86898e;
  --steel-600: #707378;
  --steel-700: #585b5f;
  --steel-800: #404346;
  --steel-900: #2a2b2e;
  --steel-950: #181819;

  /* --- Sémantiques -------------------------------------------------------- */
  --green-50: #e4ffea;
  --green-100: #caf9d5;
  --green-200: #a8eab9;
  --green-300: #7dd497;
  --green-400: #50ba75;
  --green-500: #28a25a;
  --green-600: #008a46;
  --green-700: #006d36;
  --green-800: #005126;
  --green-900: #003617;

  --amber-50: #fff5e7;
  --amber-100: #ffe8c5;
  --amber-200: #fcd08d;
  --amber-300: #ebb358;
  --amber-400: #d4940c;
  --amber-500: #b57d00;
  --amber-600: #986900;
  --amber-700: #795200;
  --amber-800: #5a3c00;
  --amber-900: #3c2700;

  /* Erreur : rouge volontairement plus rosé que la marque,
     toujours accompagné d'une icône et d'un texte. */
  --rose-50: #fff4f3;
  --rose-100: #ffe4e2;
  --rose-200: #ffc8c4;
  --rose-300: #ffa09b;
  --rose-400: #ff6a6a;
  --rose-500: #e64a4f;
  --rose-600: #cb2f39;
  --rose-700: #a81526;
  --rose-800: #7f0518;
  --rose-900: #540910;

  /* --- Fonds -------------------------------------------------------------- */
  --ink-0: #050607;          /* noir le plus profond (header, footer) */
  --bg-dark: #0a0b0d;        /* fond principal « lab » */
  --surface-dark: #131519;   /* cartes sur fond sombre */
  --surface-dark-2: #1a1d22; /* survol / surfaces surélevées */
  --bg-light: #f6f7f8;
  --surface-light: #ffffff;

  /* --- Rôles (thème sombre par défaut) ------------------------------------
     Contrastes vérifiés (WCAG AA ≥ 4.5:1) — détail dans DESIGN.md */
  --color-bg: var(--bg-dark);
  --color-surface: var(--surface-dark);
  --color-surface-2: var(--surface-dark-2);
  --color-text: var(--steel-100);         /* 16.4:1 */
  --color-text-strong: var(--steel-50);
  --color-muted: var(--steel-400);        /* 7.66:1 */
  --color-border: rgb(255 255 255 / 0.09);
  --color-border-strong: rgb(255 255 255 / 0.18);
  --color-link: var(--red-400);           /* 6.55:1 sur surface */
  --color-link-hover: var(--red-300);
  --color-accent: var(--red-500);         /* décor, lueurs, 3D — pas pour du petit texte */
  --color-glow: rgb(240 16 29 / 0.45);
  --color-success: var(--green-400);
  --color-warning: var(--amber-400);
  --color-error: var(--rose-400);
  --color-focus: var(--steel-50);

  --btn-bg: var(--red-600);               /* blanc sur red-600 : 5.34:1 */
  --btn-bg-hover: var(--red-700);
  --btn-text: #ffffff;

  color-scheme: dark;

  /* --- Typographie -------------------------------------------------------- */
  --font-display: "Space Grotesk", ui-sans-serif, system-ui, "Segoe UI", sans-serif;
  --font-body: "Inter", ui-sans-serif, system-ui, "Segoe UI", Roboto, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "Cascadia Code", Consolas, monospace;

  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-md: 1.125rem;
  --text-lg: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem);
  --text-xl: clamp(1.5rem, 1.2rem + 1.2vw, 2rem);
  --text-2xl: clamp(1.875rem, 1.4rem + 2vw, 2.75rem);
  --text-3xl: clamp(2.25rem, 1.5rem + 3.4vw, 4rem);
  --text-4xl: clamp(2.5rem, 1.4rem + 5vw, 5.25rem);

  --leading-tight: 1.1;
  --leading-snug: 1.3;
  --leading-body: 1.65;

  /* --- Espacements (échelle 4 px) ----------------------------------------- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --space-9: 6rem;
  --space-10: 8rem;
  --section-y: clamp(4rem, 3rem + 5vw, 8rem);
  --gutter: clamp(1rem, 0.5rem + 2.5vw, 2.5rem);
  --container: 76rem;
  --container-narrow: 46rem;

  /* --- Rayons ------------------------------------------------------------- */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-full: 999px;

  /* --- Ombres ------------------------------------------------------------- */
  --shadow-sm: 0 1px 2px rgb(0 0 0 / 0.35);
  --shadow-md: 0 8px 24px -8px rgb(0 0 0 / 0.55);
  --shadow-lg: 0 24px 60px -20px rgb(0 0 0 / 0.7);
  --shadow-glow: 0 0 0 1px rgb(240 16 29 / 0.35), 0 10px 40px -10px rgb(240 16 29 / 0.45);

  /* --- Mouvement ---------------------------------------------------------- */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 160ms;
  --dur: 280ms;
  --dur-slow: 600ms;

  --header-h: 4.5rem;
}

/* Sections claires (contenus longs) : on redéfinit les rôles */
.theme-light {
  --color-bg: var(--bg-light);
  --color-surface: var(--surface-light);
  --color-surface-2: var(--steel-50);
  --color-text: var(--steel-900);         /* 13.2:1 */
  --color-text-strong: var(--steel-950);
  --color-muted: var(--steel-700);        /* 6.36:1 */
  --color-border: rgb(0 0 0 / 0.1);
  --color-border-strong: rgb(0 0 0 / 0.2);
  --color-link: var(--red-700);           /* 7.03:1 */
  --color-link-hover: var(--red-800);
  --color-success: var(--green-700);
  --color-warning: var(--amber-700);
  --color-error: var(--rose-700);
  --color-focus: var(--steel-950);
  --shadow-md: 0 8px 24px -12px rgb(16 18 22 / 0.18);
  --shadow-lg: 0 24px 50px -24px rgb(16 18 22 / 0.28);
  color-scheme: light;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast: 0ms;
    --dur: 0ms;
    --dur-slow: 0ms;
  }
}