/* =============================================================
   Socle · Couche 2 : tokens sémantiques
   Des rôles, pas des valeurs. Chaque token pointe vers une
   primitive. C'est LA seule couche que les composants
   consomment. Le thème sombre est une simple redéfinition de
   cette couche sous [data-theme="dark"].
   ============================================================= */

:root {
  color-scheme: light;

  /* ---------------------------------------------------------
     Couleur · Fonds
     --------------------------------------------------------- */
  --color-bg-page: var(--neutral-50);          /* fond de page */
  --color-bg-surface: var(--neutral-0);        /* cartes, panneaux, champs */
  --color-bg-subtle: var(--neutral-100);       /* zones secondaires, pistes */
  --color-bg-hover: var(--neutral-100);        /* survol d'un élément posé sur une surface */
  /* Enfoncé d'un élément posé sur une surface, et survol d'un élément
     déjà posé sur --color-bg-subtle : le survol neutre vaut la même
     valeur que le fond adouci, il ne s'y verrait pas. */
  --color-bg-active: var(--neutral-200);
  /* Troisième cran neutre, celui qui manquait. Enfoncé d'un élément
     posé sur --color-bg-subtle, dont le survol a déjà pris le cran
     au-dessus : sans lui, survol et enfoncé rendent le même pixel.
     Lu par l'étiquette et sa croix, l'onglet pastille, la croix de
     l'alerte neutre. */
  --color-bg-subtle-active: var(--neutral-300);
  /* Bande de balayage d'une forme d'attente. Seul fond neutre qui ne
     suit pas l'inversion de la palette : un miroitement reste plus
     clair que son aplat dans les deux thèmes, ce qu'aucun couple de
     rôles neutres ne peut tenir puisque l'échelle s'inverse.
     Lu par le balayage du squelette. */
  --color-bg-shimmer: var(--neutral-0);
  --color-bg-inverse: var(--neutral-900);      /* tooltips, éléments inversés */
  --color-bg-overlay: color-mix(in srgb, var(--neutral-950) 55%, transparent); /* voile des modales */

  /* ---------------------------------------------------------
     Couleur · Texte
     --------------------------------------------------------- */
  --color-text: var(--neutral-900);
  --color-text-secondary: var(--neutral-700);
  --color-text-muted: var(--neutral-500);
  --color-text-inverse: var(--neutral-0);
  --color-text-on-accent: var(--neutral-0);
  /* L'ambre reste clair dans les deux thèmes : son texte ne bascule pas. */
  --color-text-on-warning: var(--neutral-950);
  --color-text-link: var(--blue-600);
  --color-text-link-hover: var(--blue-700);

  /* ---------------------------------------------------------
     Couleur · Bordures
     --------------------------------------------------------- */
  --color-border: var(--neutral-200);
  --color-border-strong: var(--neutral-300);
  --color-border-hover: var(--neutral-400);   /* contrôle survolé */
  --color-border-active: var(--neutral-500);  /* contrôle enfoncé */
  --color-control-track: var(--neutral-400);  /* piste éteinte d'un interrupteur */

  /* ---------------------------------------------------------
     Couleur · Accent
     --------------------------------------------------------- */
  --color-accent: var(--blue-600);
  --color-accent-hover: var(--blue-700);
  --color-accent-active: var(--blue-800);
  --color-accent-subtle: var(--blue-50);
  --color-accent-subtle-hover: var(--blue-100);
  --color-accent-border: var(--blue-200);
  --color-accent-text: var(--blue-700);

  /* ---------------------------------------------------------
     Couleur · Statuts
     (motif : solid / hover / subtle / border / text)
     --------------------------------------------------------- */
  --color-success: var(--green-600);
  --color-success-hover: var(--green-700);
  --color-success-subtle: var(--green-50);
  --color-success-border: var(--green-200);
  --color-success-text: var(--green-700);

  --color-danger: var(--red-600);
  --color-danger-hover: var(--red-700);
  --color-danger-active: var(--red-800);
  --color-danger-subtle: var(--red-50);
  /* Second cran du fond discret, sur le modèle de
     --color-accent-subtle-hover : item de menu --danger enfoncé,
     croix d'une étiquette .sc-tag--danger survolée. */
  --color-danger-subtle-hover: var(--red-100);
  --color-danger-border: var(--red-200);
  --color-danger-text: var(--red-700);

  --color-warning: var(--amber-500);
  --color-warning-hover: var(--amber-600);
  --color-warning-subtle: var(--amber-50);
  --color-warning-border: var(--amber-200);
  --color-warning-text: var(--amber-800);

  --color-info: var(--blue-600);
  --color-info-subtle: var(--blue-50);
  --color-info-border: var(--blue-200);
  --color-info-text: var(--blue-700);

  /* ---------------------------------------------------------
     Épaisseurs de trait
     Trois intentions, pas trois valeurs : ce qui délimite, ce qui
     signale, et ce qui dessine. Un composant qui écrivait --border-1
     disait « 1 pixel » au lieu de dire « un filet ».
     --------------------------------------------------------- */
  --border-hairline: var(--border-1);   /* ce qui délimite ou sépare : cadres, filets, séparateurs */
  --border-emphasis: var(--border-2);   /* ce qui signale : indicateur d'onglet, anneau d'avatar */
  --icon-stroke-width: var(--border-2); /* ce qui dessine : glyphe tracé en CSS, à égalité avec le stroke-width des SVG */

  /* ---------------------------------------------------------
     Focus
     --------------------------------------------------------- */
  --color-focus-ring: var(--blue-500);
  --focus-ring-width: var(--border-2);
  --focus-ring-offset: var(--space-2);

  /* ---------------------------------------------------------
     Opacités
     --------------------------------------------------------- */
  --opacity-disabled: 0.5;

  /* ---------------------------------------------------------
     Espacement sémantique
     Les composants consomment ces rôles, jamais --space-*.
     Changer --padding-s ici retouche tout ce qui s'en sert.
     --------------------------------------------------------- */
  --padding-2xs: var(--space-4);
  --padding-xs: var(--space-6);
  --padding-s: var(--space-8);
  --padding-m: var(--space-12);
  --padding-l: var(--space-16);
  --padding-xl: var(--space-20);
  --padding-2xl: var(--space-24);
  --padding-3xl: var(--space-32);
  --padding-4xl: var(--space-48);

  --gap-2xs: var(--space-4);
  --gap-xs: var(--space-6);
  --gap-s: var(--space-8);
  --gap-m: var(--space-12);
  --gap-l: var(--space-16);
  --gap-xl: var(--space-24);
  --gap-2xl: var(--space-32);

  /* ---------------------------------------------------------
     Rayons sémantiques
     --------------------------------------------------------- */
  --radius-control-s: var(--radius-4); /* petits contrôles : case à cocher, puce */
  --radius-control: var(--radius-8);   /* boutons, champs, items de menu */
  --radius-surface: var(--radius-12);  /* cartes, alertes, popovers */
  --radius-overlay: var(--radius-16);  /* dialogues, panneaux */
  --radius-pill: var(--radius-full);   /* badges, avatars, interrupteurs */

  /* ---------------------------------------------------------
     Typographie sémantique
     --------------------------------------------------------- */
  --font-body: var(--font-sans);
  --font-heading: var(--font-sans);
  --font-code: var(--font-mono);

  --text-h1-size: var(--font-size-30);
  --text-h1-weight: var(--font-weight-semibold);
  --text-h2-size: var(--font-size-24);
  --text-h2-weight: var(--font-weight-semibold);
  --text-h3-size: var(--font-size-20);
  --text-h3-weight: var(--font-weight-semibold);
  --text-h4-size: var(--font-size-16);
  --text-h4-weight: var(--font-weight-semibold);

  --text-body-size: var(--font-size-15);
  --text-body-s-size: var(--font-size-13);
  --text-label-size: var(--font-size-14);     /* boutons, libellés */
  --text-caption-size: var(--font-size-12);   /* légendes, aides */
  --text-code-size: var(--font-size-13);

  /* Graisses. Les titres ont les leurs plus haut ; celles-ci disent le
     rôle d'un texte courant : ce qui se lit, ce qui nomme une commande,
     ce qui ouvre une section. */
  --text-body-weight: var(--font-weight-regular);    /* le texte qui se lit */
  --text-label-weight: var(--font-weight-medium);    /* ce qui nomme : bouton, onglet, badge, en-tête de tableau */
  --text-strong-weight: var(--font-weight-semibold); /* ce qui ouvre : titre de toast, marque, sur-titre de section */

  /* Interlignage et interlettrage : des rôles, pour que les
     composants n'aient jamais à toucher aux primitives. */
  --leading-tight: var(--line-height-tight);       /* titres */
  --leading-snug: var(--line-height-snug);         /* libellés sur deux lignes */
  --leading-normal: var(--line-height-normal);     /* corps par défaut */
  --leading-relaxed: var(--line-height-relaxed);   /* prose longue */

  --tracking-tight: var(--letter-spacing-tight);   /* grands titres */
  --tracking-normal: var(--letter-spacing-normal);
  --tracking-wide: var(--letter-spacing-wide);     /* capitales, sur-titres */

  /* ---------------------------------------------------------
     Contrôles (hauteurs partagées boutons / champs / selects)
     --------------------------------------------------------- */
  --control-height-s: 2rem;      /* 32px */
  --control-height-m: 2.25rem;   /* 36px */
  --control-height-l: 2.75rem;   /* 44px */

  /* ---------------------------------------------------------
     Élévation
     --------------------------------------------------------- */
  --elevation-raised: var(--shadow-s);     /* cartes survolées */
  --elevation-floating: var(--shadow-m);   /* menus, popovers, tooltips */
  --elevation-overlay: var(--shadow-l);    /* dialogues, panneaux */
  --elevation-toast: var(--shadow-l);

  /* ---------------------------------------------------------
     Mouvement
     --------------------------------------------------------- */
  /* Raccourcis durée + courbe, pour les transitions. */
  --motion-fast: var(--duration-fast) var(--ease-standard);
  --motion-base: var(--duration-base) var(--ease-standard);
  --motion-slow: var(--duration-slow) var(--ease-out);

  /* Parties séparables, pour les animations et les délais où le
     raccourci ci-dessus ne peut pas servir. */
  --motion-duration-fast: var(--duration-fast);
  --motion-duration-base: var(--duration-base);
  --motion-duration-slow: var(--duration-slow);
  /* Durée d'un aller de boucle d'attente : barre de progression
     indéterminée, balayage d'un squelette de chargement. */
  --motion-duration-loop: calc(var(--duration-slow) * 5);
  --motion-ease-standard: var(--ease-standard);
  --motion-ease-out: var(--ease-out);
  --motion-ease-loop: var(--ease-in-out);   /* va-et-vient d'une boucle */
}

/* =============================================================
   Thème sombre
   Seule la couche sémantique bouge : les composants suivent.
   ============================================================= */
[data-theme="dark"] {
  color-scheme: dark;

  --color-bg-page: var(--neutral-950);
  --color-bg-surface: var(--neutral-900);
  --color-bg-subtle: var(--neutral-800);
  --color-bg-hover: var(--neutral-800);
  --color-bg-active: var(--neutral-700);
  --color-bg-subtle-active: var(--neutral-600);
  /* Plus clair que --color-bg-subtle ici aussi : le rôle garde son
     sens d'un thème à l'autre, seule sa valeur change. */
  --color-bg-shimmer: var(--neutral-700);
  --color-bg-inverse: var(--neutral-100);
  --color-bg-overlay: color-mix(in srgb, var(--neutral-1000) 65%, transparent);

  --color-text: var(--neutral-50);
  --color-text-secondary: var(--neutral-300);
  --color-text-muted: var(--neutral-500);
  --color-text-inverse: var(--neutral-900);
  --color-text-link: var(--blue-400);
  --color-text-link-hover: var(--blue-300);

  --color-border: var(--neutral-800);
  --color-border-strong: var(--neutral-700);
  --color-border-hover: var(--neutral-600);
  --color-border-active: var(--neutral-500);
  --color-control-track: var(--neutral-600);

  --color-accent: var(--blue-500);
  --color-accent-hover: var(--blue-400);
  --color-accent-active: var(--blue-300);
  --color-accent-subtle: var(--blue-950);
  --color-accent-subtle-hover: var(--blue-900);
  --color-accent-border: var(--blue-800);
  --color-accent-text: var(--blue-300);

  --color-success: var(--green-500);
  --color-success-hover: var(--green-400);
  --color-success-subtle: var(--green-950);
  --color-success-border: var(--green-800);
  --color-success-text: var(--green-300);

  --color-danger: var(--red-500);
  --color-danger-hover: var(--red-400);
  --color-danger-active: var(--red-300);
  --color-danger-subtle: var(--red-950);
  --color-danger-subtle-hover: var(--red-900);
  --color-danger-border: var(--red-800);
  --color-danger-text: var(--red-300);

  --color-warning: var(--amber-500);
  --color-warning-hover: var(--amber-400);
  --color-warning-subtle: var(--amber-950);
  --color-warning-border: var(--amber-800);
  --color-warning-text: var(--amber-300);

  --color-info: var(--blue-500);
  --color-info-subtle: var(--blue-950);
  --color-info-border: var(--blue-800);
  --color-info-text: var(--blue-300);

  --color-focus-ring: var(--blue-400);

  --elevation-raised: var(--shadow-dark-s);
  --elevation-floating: var(--shadow-dark-m);
  --elevation-overlay: var(--shadow-dark-l);
  --elevation-toast: var(--shadow-dark-l);
}