/* =============================================================
   Socle · Couche 1 : tokens primitifs
   Les valeurs brutes du système. C'est le seul fichier où un
   hex, un rem ou une courbe littérale a le droit d'exister.
   Les composants ne consomment JAMAIS ces tokens directement :
   ils passent par la couche sémantique (tokens/semantic.css).
   ============================================================= */

:root {
  /* ---------------------------------------------------------
     Couleurs · Neutres (zinc, presque sans teinte)
     L'échelle est relevée sur les neutres de production de
     Supabase et de Vibecoded. Le cran 111113, entre 09090b et
     18181b, n'a pas de logement : l'échelle n'a que deux crans
     sous la surface sombre, et c'est 09090b qui fait le fond.
     --------------------------------------------------------- */
  --neutral-0: #ffffff;
  --neutral-50: #fafafa;
  --neutral-100: #f4f4f5;
  --neutral-200: #e4e4e7;
  --neutral-300: #d4d4d8;
  --neutral-400: #a1a1aa;
  --neutral-450: #83838c;   /* atténué du thème sombre : 4,72 sur une surface */
  --neutral-500: #71717a;
  --neutral-600: #52525b;
  --neutral-700: #3f3f46;
  --neutral-800: #27272a;
  /* Le filet du thème sombre. Il tombe entre 800 et 900 et n'avait pas
     de logement : sans lui, un cadre de carte pesait le même poids
     qu'un fond adouci. */
  --neutral-850: #252528;
  --neutral-900: #18181b;
  /* La surface du thème sombre, entre 900 et 950. Deux crans sous le
     fond de page ne suffisaient pas : il en faut un pour la page, un
     pour la surface posée dessus, un pour le creux. */
  --neutral-925: #111113;
  --neutral-950: #09090b;
  --neutral-1000: #000000;

  /* ---------------------------------------------------------
     Couleurs · Accent (bleu électrique)
     Trois crans sont des valeurs de production exactes : 600 est le
     bleu de Vibecoded, 700 son survol, 500 sa version pour thème
     sombre. Les autres crans s'interpolent autour.
     Les deux derniers crans ne s'interpolent pas vers le noir, ils se
     calent sur les trois autres familles. Une échelle qui plonge à 8 %
     de clarté à son extrémité donne un fond discret plus sombre que la
     surface qui le porte : en thème sombre, le rôle censé teinter
     creuse un trou. 950 et 900 tiennent donc la luminance de leurs
     homologues vert, rouge et ambre, à teinte et saturation de la
     famille bleue.
     --------------------------------------------------------- */
  --blue-50: #eef3ff;
  --blue-100: #dde7ff;
  --blue-200: #bcd0ff;
  --blue-300: #8fb0ff;
  --blue-400: #5c8dff;
  --blue-500: #2670ff;
  --blue-600: #0057ff;
  --blue-700: #0047d6;
  --blue-800: #0039ad;
  --blue-900: #143a70;
  --blue-950: #0b2141;
  /* Le fond discret du thème sombre : un bleu presque noir, encore
     sous le 950. */
  --blue-975: #081021;

  /* ---------------------------------------------------------
     Couleurs · Statuts
     Les trois familles gardent leurs noms et changent de teinte : ce
     sont celles de la console. Le « vert » est un bleu-vert, le
     positif y est un teal profond en clair et une menthe vive en
     sombre. L'« ambre » est un jaune-vert, sauf son cran 800 qui reste
     un brun, la seule valeur assez sombre pour porter un texte de
     prudence sur du papier. Le rouge est une brique, jamais un rouge
     franc : il ne remplit rien, il cerne et il souligne.
     Les noms ne suivent pas les teintes, et c'est voulu : ce sont des
     noms de familles, pas des noms de couleurs, et les rôles
     sémantiques au-dessus disent déjà ce que chacune porte.
     --------------------------------------------------------- */
  --green-50: #ecfdf5;
  --green-100: #d3f7ee;
  --green-200: #a7e8de;
  --green-300: #7df4e9;
  --green-400: #57f0e2;
  --green-500: #2bd3c2;
  --green-600: #14a396;
  --green-700: #0f766e;
  --green-800: #0c5f59;
  --green-900: #17544c;
  --green-950: #0d2320;

  --red-50: #fef2f2;
  --red-100: #fde3e3;
  --red-200: #fbd5d5;
  --red-300: #fad0cc;
  --red-400: #f6b7b1;
  --red-500: #f19b93;
  --red-600: #c22c24;
  --red-700: #a4231c;
  --red-800: #881c17;
  --red-850: #6d3833;
  --red-900: #6d1613;
  --red-925: #46231f;
  --red-950: #2e1a18;

  --amber-50: #fefce8;
  --amber-100: #fbf8c4;
  --amber-200: #eee79f;
  --amber-300: #f0f77c;
  --amber-400: #eaf452;
  --amber-500: #d2ba1f;
  --amber-600: #b9a316;
  --amber-700: #9a8712;
  --amber-800: #854d0e;
  --amber-900: #4d5320;
  --amber-950: #22240f;

  /* ---------------------------------------------------------
     Couleurs · Séries
     Les quatre teintes d'un graphique, et leur ordre est un mécanisme
     de sécurité plutôt qu'un goût : vert et ambre côte à côte tombent à
     ΔE 4,9 en deutéranopie, et glisser le fuchsia entre les deux
     remonte la pire paire voisine à 19,8. L'ordre ne se réarrange pas.
     Elles ne sont pas dans les familles de statut : un statut dit ce
     qui va bien ou mal, une série ne dit que « celle-ci n'est pas
     celle-là ». Les confondre donne un graphique où la troisième
     courbe a l'air d'une alerte.
     La première ne change pas de thème, c'est le bleu de la marque.
     Les trois autres s'éclaircissent sur fond sombre pour tenir la
     bande de clarté.
     --------------------------------------------------------- */
  --serie-1: #0057ff;
  --serie-2: #a07000;
  --serie-3: #c500c8;
  --serie-4: #009342;
  --serie-2-sombre: #bf8600;
  --serie-3-sombre: #e52be7;
  --serie-4-sombre: #00af50;

  /* ---------------------------------------------------------
     Typographie
     --------------------------------------------------------- */
  /* Trois voix, trois rôles qui ne se mélangent pas. La chasse étrange
     ne porte que les micro-libellés en capitales, la display ne porte
     que les titres de page et de calque, la linéale porte tout le
     reste, valeurs comprises.
     Deux de ces coupes sont installées en version d'essai sur le poste
     de développement. Une licence d'essai ne couvre pas un usage web
     en production : c'est la seule chose de ce système qui bloque une
     mise en ligne réelle. */
  --font-sans: Saans, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-display: "KH Teka", "KH Teka TRIAL", var(--font-sans);
  --font-mono: "KH Interference", "KH Interference TRIAL", ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;

  --font-size-12: 0.75rem;
  --font-size-13: 0.8125rem;
  --font-size-14: 0.875rem;
  --font-size-15: 0.9375rem;
  --font-size-16: 1rem;
  --font-size-18: 1.125rem;
  --font-size-20: 1.25rem;
  --font-size-24: 1.5rem;
  --font-size-30: 1.875rem;
  --font-size-32: 2rem;
  --font-size-36: 2.25rem;
  --font-size-40: 2.5rem;

  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  --line-height-tight: 1.2;
  --line-height-snug: 1.35;
  --line-height-normal: 1.5;
  --line-height-relaxed: 1.65;

  --letter-spacing-tight: -0.02em;
  --letter-spacing-normal: 0;
  --letter-spacing-wide: 0.08em;

  /* ---------------------------------------------------------
     Espacement (grille de 4px, nommé par sa valeur en px)
     --------------------------------------------------------- */
  --space-0: 0;
  --space-2: 0.125rem;
  --space-4: 0.25rem;
  --space-6: 0.375rem;
  --space-8: 0.5rem;
  --space-10: 0.625rem;
  --space-12: 0.75rem;
  /* Le cran qui fait la densité de la référence. Il revient partout :
     entre deux blocs d'une carte, entre deux cartes d'une grille, dans
     la gouttière d'une console. Il n'est pas une puissance de deux, et
     c'est lui qui décide du reste de l'échelle. */
  --space-14: 0.875rem;
  --space-16: 1rem;
  --space-20: 1.25rem;
  --space-24: 1.5rem;
  --space-32: 2rem;
  --space-40: 2.5rem;
  --space-48: 3rem;
  --space-64: 4rem;
  --space-80: 5rem;

  /* ---------------------------------------------------------
     Rayons
     --------------------------------------------------------- */
  --radius-0: 0;
  /* Le coin d'un enfant collé au bord de son parent. Un rayon intérieur
     ne peut pas dépasser celui de son parent moins la distance au
     bord. */
  --radius-2: 0.125rem;
  --radius-4: 0.25rem;
  --radius-6: 0.375rem;
  --radius-8: 0.5rem;
  --radius-10: 0.625rem;
  --radius-12: 0.75rem;
  --radius-16: 1rem;
  --radius-20: 1.25rem;
  --radius-full: 9999px;

  /* ---------------------------------------------------------
     Bordures
     --------------------------------------------------------- */
  --border-1: 1px;
  --border-2: 2px;
  --border-3: 3px;

  /* ---------------------------------------------------------
     Ombres (deux jeux : clair et sombre)
     Le système est à plat : la bordure fine fait le travail,
     l'ombre ne fait que décoller ce qui flotte vraiment.
     --------------------------------------------------------- */
  --shadow-xs: 0 1px 2px rgba(24, 24, 27, 0.04);
  --shadow-s: 0 2px 4px rgba(24, 24, 27, 0.05);
  --shadow-m: 0 2px 4px rgba(24, 24, 27, 0.05), 0 16px 32px -16px rgba(24, 24, 27, 0.10);
  --shadow-l: 0 2px 4px rgba(24, 24, 27, 0.05), 0 16px 32px -16px rgba(24, 24, 27, 0.10), 0 32px 64px -32px rgba(24, 24, 27, 0.14);

  --shadow-dark-xs: 0 1px 3px rgba(0, 0, 0, 0.6);
  --shadow-dark-s: 0 2px 4px rgba(0, 0, 0, 0.4);
  --shadow-dark-m: 0 2px 4px rgba(0, 0, 0, 0.4), 0 16px 32px -16px rgba(0, 0, 0, 0.6);
  --shadow-dark-l: 0 2px 4px rgba(0, 0, 0, 0.4), 0 16px 32px -16px rgba(0, 0, 0, 0.6), 0 32px 64px -32px rgba(0, 0, 0, 0.7);

  /* ---------------------------------------------------------
     Plans (z-index)
     --------------------------------------------------------- */
  --z-dropdown: 1000;
  --z-sticky: 1020;
  --z-overlay: 1030;
  --z-modal: 1040;
  --z-toast: 1050;
  --z-tooltip: 1060;

  /* ---------------------------------------------------------
     Mouvement
     --------------------------------------------------------- */
  /* Une seule courbe partout, et les exceptions ne portent que sur les
     durées, jamais sur la forme du geste. */
  --duration-fast: 150ms;
  --duration-base: 170ms;
  --duration-slow: 220ms;
  --duration-travel: 260ms;
  --ease-standard: cubic-bezier(0.22, 0.8, 0.28, 1);
  --ease-out: cubic-bezier(0.22, 0.8, 0.28, 1);
  --ease-in-out: cubic-bezier(0.22, 0.8, 0.28, 1);
  --ease-bounce: cubic-bezier(0.3, 1.4, 0.4, 1);
}