/* ============================================================
   DESIGN SYSTEM v6 — VALEURS PAR DÉFAUT
   ============================================================
   Les six familles de tokens sémantiques, dans leur état par défaut —
   ce que le catalogue appelle le thème « Moderne ».

     1. COULEURS   2. ESPACES      3. LAYOUT PRINCIPAL
     4. OMBRES     5. ANIMATIONS   6. TYPOGRAPHIE

   Chaque token décrit une INTENTION (« la couleur d'action principale »)
   et pointe vers une primitive (« indigo 600 »). C'est cette couche —
   et elle seule — qu'un thème de styles/themes/ vient surcharger, en
   tout ou en partie : une famille non redéfinie retombe ici.

   Contrairement aux thèmes, ce fichier n'est pas optionnel : il est le
   socle de repli, et il est scopé :root là où les thèmes sont scopés
   [data-theme-style]. C'est pourquoi il ne vit pas dans themes/.

   ── Clair / sombre : une seule déclaration ──
   Chaque token qui dépend du mode s'écrit light-dark(clair, sombre) :
   ni bloc sombre à recopier, ni miroir @media à maintenir. Le mode auto
   est natif, SANS JavaScript, pour ce fichier comme pour les thèmes ;
   data-theme="light|dark" ne fait que figer color-scheme.

   ⚠ light-dark() ne prend que des COULEURS. Une pile d'ombres entière
   y est invalide, et la propriété est ignorée EN SILENCE : la fonction
   se place sur la couleur (0 2px 8px light-dark(…, …)) ou sur une
   primitive de teinte (--base-shadow-tint-*). Vérifié par la règle stylelint
   design-system/light-dark-colors-only.

   Prérequis navigateur : Baseline 2024 (Chrome 123, Safari 17.5,
   Firefox 120). color-mix() (2023) était déjà requis.

   Chargement : APRÈS primitives.css, avant components.css.
   Voir documentation/ARCHITECTURE-CSS.md.
   ============================================================ */


/* ============================================================
   1. COULEURS — Thème « Moderne » (défaut)
   Surfaces, texte, bordures, actions, statuts, sélection.
   ============================================================
   Une seule déclaration par token, les deux modes portés par
   light-dark(clair, sombre) — plus de bloc sombre à recopier ni de
   miroir @media à maintenir. La branche retenue suit le color-scheme
   calculé : « light dark » sur :root, donc la préférence système par
   défaut, et l'un des deux quand data-theme est posé. Le mode auto
   fonctionne ainsi SANS JavaScript, y compris pour les thèmes de
   styles/themes/*.css.

   Les tokens déclarés d'une seule valeur sont ceux qui ne dépendent
   pas du mode — c'est désormais visible d'un coup d'œil.
   ============================================================ */
:root {
  color-scheme: light dark;

  --surface-base: light-dark(var(--base-neutral-0), var(--base-neutral-950));
  --surface-raised: light-dark(var(--base-neutral-50), var(--base-neutral-900));
  --surface-sunken: light-dark(var(--base-neutral-100), var(--base-neutral-925));
  --surface-overlay: light-dark(
    color-mix(in srgb, var(--base-neutral-0) 85%, transparent),
    color-mix(in srgb, var(--base-neutral-900) 88%, transparent));
  --surface-glass: light-dark(
    color-mix(in srgb, var(--base-neutral-0) 60%, transparent),
    color-mix(in srgb, var(--base-neutral-900) 60%, transparent));
  --surface-backdrop: color-mix(in srgb, var(--base-neutral-1000) 50%, transparent);
  --surface-inverse: light-dark(var(--base-neutral-900), var(--base-neutral-100));

  --text: light-dark(var(--base-neutral-900), var(--base-neutral-50));
  --text-secondary: light-dark(var(--base-neutral-600), var(--base-neutral-300));
  --text-tertiary: light-dark(var(--base-neutral-500), var(--base-neutral-400));
  --text-inverse: light-dark(var(--base-neutral-0), var(--base-neutral-900));
  --text-on-action: var(--base-neutral-0);
  --text-on-danger: light-dark(var(--base-neutral-0), var(--base-neutral-950));
  --text-link: light-dark(var(--base-primary-600), var(--base-primary-400));
  --text-link-hover: light-dark(var(--base-primary-700), var(--base-primary-300));

  --border: light-dark(var(--base-neutral-200), var(--base-neutral-800));
  --border-muted: light-dark(var(--base-neutral-100), color-mix(in srgb, var(--base-neutral-0) 6%, transparent));
  --border-strong: light-dark(var(--base-neutral-300), var(--base-neutral-700));
  --border-field: var(--base-neutral-500);
  --border-action: transparent;
  --border-focus: light-dark(var(--base-primary-500), var(--base-primary-400));
  --border-accent: var(--base-primary-400);

  --action-primary: var(--base-primary-600);
  --action-primary-hover: var(--base-primary-700);
  --action-primary-active: var(--base-primary-800);
  --action-secondary: light-dark(var(--base-neutral-100), var(--base-neutral-800));
  --action-secondary-hover: light-dark(var(--base-neutral-200), var(--base-neutral-700));
  --action-danger: light-dark(var(--base-error-600), var(--base-error-500));
  --action-danger-hover: light-dark(var(--base-error-700), var(--base-error-400));

  /* Statuts : fonds pleins en clair, teintes translucides en sombre. */
  --status-success-background: light-dark(var(--base-success-50), color-mix(in srgb, var(--base-success-500) 12%, transparent));
  --status-success-foreground: light-dark(var(--base-success-700), var(--base-success-400));
  --status-success-border: light-dark(var(--base-success-200), color-mix(in srgb, var(--base-success-500) 25%, transparent));
  --status-warning-background: light-dark(var(--base-warning-50), color-mix(in srgb, var(--base-warning-500) 12%, transparent));
  --status-warning-foreground: light-dark(var(--base-warning-700), var(--base-warning-400));
  --status-warning-border: light-dark(var(--base-warning-200), color-mix(in srgb, var(--base-warning-500) 25%, transparent));
  --status-danger-background: light-dark(var(--base-error-50), color-mix(in srgb, var(--base-error-500) 12%, transparent));
  --status-danger-foreground: light-dark(var(--base-error-700), var(--base-error-400));
  --status-danger-border: light-dark(var(--base-error-200), color-mix(in srgb, var(--base-error-500) 25%, transparent));
  --status-info-background: light-dark(var(--base-info-50), color-mix(in srgb, var(--base-info-500) 12%, transparent));
  --status-info-foreground: light-dark(var(--base-info-700), var(--base-info-400));
  --status-info-border: light-dark(var(--base-info-200), color-mix(in srgb, var(--base-info-500) 25%, transparent));

  --selection-background: light-dark(var(--base-primary-200), var(--base-primary-800));
  --selection-foreground: light-dark(var(--base-primary-900), var(--base-primary-100));

  /* Variante "primary" (badge…) — même famille que --st-* */
  --status-primary-background: light-dark(var(--base-primary-100), color-mix(in srgb, var(--base-primary-500) 15%, transparent));
  --status-primary-foreground: light-dark(var(--base-primary-700), var(--base-primary-300));
  --status-primary-border: transparent;

  /* Texte de marque dans du code inline (<code>, <var>) et puces de liste */
  --text-code: light-dark(var(--base-primary-600), var(--base-primary-300));
  --text-code-accent: light-dark(var(--base-accent-600), var(--base-accent-400));
  --text-marker: var(--base-primary-400);

  /* Dégradé de marque — utilisé par défaut par avatar/bouton gradient/hr gradient/hero */
  --brand-gradient: var(--base-gradient-primary);
  --brand-mesh: var(--base-gradient-mesh);

  --scrollbar-track: light-dark(var(--base-neutral-100), var(--base-neutral-900));
  --scrollbar-thumb: light-dark(var(--base-neutral-300), var(--base-neutral-700));
  --scrollbar-thumb-hover: light-dark(var(--base-neutral-400), var(--base-neutral-600));
}

/* data-theme fige le mode en verrouillant color-scheme : toutes les
   light-dark() du document — celles de ce fichier comme celles des
   thèmes — basculent avec lui. C'est le seul rôle de ces deux règles. */
[data-theme="light"] { color-scheme: light; }
[data-theme="dark"] { color-scheme: dark; }


/* ============================================================
   2. ESPACES — Thème « Moderne »
   Rythme vertical/horizontal sémantique. Ne référence QUE
   l'échelle brute --base-space-*, jamais de valeur en dur.
   ============================================================ */
:root {
  /* Échelle générique (t-shirt) — couvre les micro-ajustements
     (gaps serrés, paddings d'un seul caractère) qui n'ont pas leur
     propre rôle nommé ci-dessous. C'est elle, et non --base-space-* direct,
     qu'on utilise pour le moindre écart ponctuel dans components.css. */
  --space-4xs: var(--base-space-0\.5);
  --space-3xs: var(--base-space-1);
  --space-2xs: var(--base-space-2);
  --space-xs:  var(--base-space-3);
  --space-sm:  var(--base-space-4);
  --space-md:  var(--base-space-6);
  --space-lg:  var(--base-space-8);
  --space-xl:  var(--base-space-12);
  --space-2xl: var(--base-space-16);

  /* Rythme générique (alias historiques, plus explicites en contexte) */
  --space-inline-gap: var(--space-2xs);  /* icône + texte, éléments inline */
  --space-stack-gap: var(--space-sm);    /* paragraphes, champs de formulaire */
  --space-group-gap: var(--space-md);    /* groupe de composants liés */
  --space-section-gap: var(--space-2xl); /* entre sections majeures */
  --space-page-padding: var(--space-md); /* header / main / footer, marge horizontale */

  /* Composants */
  --space-card-padding: var(--base-space-6);
  --space-dialog-padding: var(--base-space-8);
  --space-fieldset-padding: var(--base-space-6);
  --space-demo-padding: var(--base-space-6);

  --space-button-padding-x: var(--base-space-5);
  --space-button-padding-y: var(--base-space-2\.5);
  --space-button-padding-x-sm: var(--base-space-3);
  --space-button-padding-y-sm: var(--base-space-1\.5);
  --space-button-padding-x-lg: var(--base-space-7);
  --space-button-padding-y-lg: var(--base-space-3);

  --space-input-padding-x: var(--base-space-3);
  --space-input-padding-y: var(--base-space-2\.5);

  --space-badge-padding-x: var(--base-space-2\.5);
  --space-badge-padding-y: var(--base-space-0\.5);

  /* Typographie / rythme vertical */
  --space-heading-gap-lg: var(--base-space-6);   /* h1, h2 */
  --space-heading-gap-sm: var(--base-space-3);   /* h3 → h6 */
  --space-heading-top-gap: var(--base-space-10); /* 1er titre dans section/article */

  /* Listes, tables, citations, code */
  --space-list-indent: var(--base-space-6);
  --space-list-item-gap: var(--base-space-2);
  --space-table-cell-padding: var(--base-space-3) var(--base-space-4);
  --space-blockquote-padding: var(--base-space-5) var(--base-space-6);
  --space-code-padding: var(--base-space-0\.5) var(--base-space-1\.5);
  --space-pre-padding: var(--base-space-5);

  /* Structure de page */
  --space-header-padding: var(--base-space-4) var(--base-space-6);
  --space-footer-padding: var(--base-space-8) var(--base-space-6);
  --space-main-padding: var(--base-space-8) var(--base-space-6);
  --space-details-padding-x: var(--base-space-5);
  --space-details-padding: var(--base-space-4) var(--space-details-padding-x);
}


/* ============================================================
   3. LAYOUT PRINCIPAL — Thème « Moderne »
   Dimensions structurelles de la page (conteneurs, header),
   et silhouette des composants (rayons). Référence --base-width-* et
   --base-radius-* bruts, jamais de valeur en dur.
   ============================================================ */
:root {
  --layout-content-width: var(--base-width-xl);
  --layout-content-narrow: var(--base-width-md);
  --layout-content-wide: var(--base-width-2xl);
  --layout-header-min-height: var(--base-space-16);
  --layout-border-width: 1px;

  --layout-radius-card: var(--base-radius-xl);
  --layout-radius-button: var(--base-radius-lg);
  --layout-radius-button-sm: var(--base-radius-md);
  --layout-radius-button-lg: var(--base-radius-xl);
  --layout-radius-input: var(--base-radius-lg);
  --layout-radius-badge: var(--base-radius-full);
  --layout-radius-avatar: var(--base-radius-full);
  --layout-radius-dialog: var(--base-radius-2xl);
  --layout-radius-tag: var(--base-radius-full);
  --layout-radius-checkbox: var(--base-radius-sm);

  --layout-toast-width: var(--base-width-sm);
  /* Un panneau latéral n'est pas une colonne de lecture : calibré
     pour une liste ou un formulaire court, pas pour du texte long. */
  --layout-drawer-width: var(--base-width-xs);
  --layout-avatar-size: var(--base-space-10);
  --layout-avatar-size-sm: var(--base-space-8);
  --layout-avatar-size-lg: var(--base-space-14);
  --layout-color-input-size: var(--base-space-10);
  /* Cible de pointage minimale (WCAG 2.2 — 2.5.8, niveau AA) : 24px.
     Dimension d'accessibilité, pas d'esthétique — un thème peut
     l'agrandir, jamais la réduire. */
  --layout-control-target: var(--base-space-6);

  --layout-layer-header: var(--base-layer-sticky);
  --layout-layer-dialog: var(--base-layer-modal);
  --layout-layer-behind: var(--base-layer-behind);
  --layout-layer-toast: var(--base-layer-toast);
  --layout-layer-tooltip: var(--base-layer-tooltip);
  /* Au-dessus du header sticky : le lien d'évitement doit rester
     visible quand il prend le focus. */
  --layout-layer-skip: var(--base-layer-overlay);
}


/* ============================================================
   4. OMBRES — Thème « Moderne »
   Élévation sémantique + alias par composant.
   ============================================================
   Les piles d'élévation portent leur bascule dans leurs teintes
   (--base-shadow-tint-*, section 0) : une seule déclaration suffit ici. Seul
   l'anneau de focus, dont l'opacité ET la nuance changent, garde un
   light-dark() explicite. */
:root {
  --shadow-elev-low:  var(--base-shadow-elev-low);
  --shadow-elev-mid:  var(--base-shadow-elev-mid);
  --shadow-elev-high: var(--base-shadow-elev-high);
  --shadow-focus-ring: 0 0 0 3px light-dark(
    color-mix(in srgb, var(--base-primary-500) 15%, transparent),
    color-mix(in srgb, var(--base-primary-400) 20%, transparent));
}

:root {
  --shadow-button: var(--base-shadow-sm);
  --shadow-button-hover: var(--base-shadow-md);
  --shadow-card: none;
  --shadow-card-elevated: var(--shadow-elev-mid);
  --shadow-card-interactive: var(--shadow-elev-low);
  --shadow-card-interactive-hover: var(--shadow-elev-high);
  --shadow-header: none;
  --shadow-dialog: var(--base-shadow-2xl);
  --shadow-kbd: var(--base-shadow-xs);
  --shadow-swatch: var(--base-shadow-md);
  --shadow-gradient-card: var(--base-shadow-md);
  --shadow-gradient-card-hover: var(--base-shadow-xl);
  --shadow-glow-accent: var(--base-shadow-glow-pri);
  --shadow-glow-danger: var(--base-shadow-glow-err);
  /* États extrêmes de l'animation pulse-glow (surchargeables par
     un thème : la pulsation suit la couleur de marque). */
  --shadow-pulse-dim: 0 0 6px color-mix(in srgb, var(--base-primary-500) 15%, transparent);
  --shadow-pulse-bright: 0 0 34px color-mix(in srgb, var(--base-primary-500) 90%, transparent);

  /* ── 5. ANIMATIONS — Thème « Moderne » ──
     Vitesse/ressort sémantiques, référencent les primitives --base-duration-* et --base-ease-*. */
  --motion-fast: var(--base-duration-fast) var(--base-ease);
  --motion-normal: var(--base-duration-normal) var(--base-ease);
  --motion-slow: var(--base-duration-slow) var(--base-ease-out);
  --motion-spring: var(--base-duration-normal) var(--base-ease-spring);

  --motion-float-distance: 8px;
  --motion-float-duration: 3s;
  --motion-spin-duration: 0.7s;
  --motion-glow-duration: 2s;
  --motion-gradient-duration: 6s;
  --motion-shimmer-duration: 1.5s;
}

/* Keyframes + mapping data-animate/data-delay (suite de la famille ANIMATIONS) */
@keyframes ds-shimmer        { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
@keyframes ds-fade-in        { from { opacity: 0; } to { opacity: 1; } }
@keyframes ds-fade-in-up     { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } }
@keyframes ds-slide-in-right { from { opacity: 0; transform: translateX(24px); } to { opacity: 1; transform: translateX(0); } }
@keyframes ds-scale-in       { from { opacity: 0; transform: scale(0.92); } to { opacity: 1; transform: scale(1); } }
@keyframes ds-float-y        { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(calc(-1 * var(--motion-float-distance))); } }
@keyframes ds-pulse-glow     { 0%, 100% { box-shadow: var(--shadow-pulse-dim); } 50% { box-shadow: var(--shadow-pulse-bright); } }
@keyframes ds-gradient-shift { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } }

[data-animate="fade-in"]    { animation: ds-fade-in var(--motion-normal) both; }
[data-animate="fade-in-up"] { animation: ds-fade-in-up var(--motion-slow) both; }
[data-animate="slide-in"]   { animation: ds-slide-in-right var(--motion-slow) both; }
[data-animate="scale-in"]   { animation: ds-scale-in var(--motion-spring) both; }
[data-animate="float"]      { animation: ds-float-y var(--motion-float-duration) var(--base-ease) infinite; }
[data-animate="pulse-glow"] { animation: ds-pulse-glow var(--motion-glow-duration) var(--base-ease) infinite; }
[data-animate="gradient"]   { background-size: 200% 200%; animation: ds-gradient-shift var(--motion-gradient-duration) ease infinite; }
/* [style*="--bg"] (components.css) pose "background" en raccourci,
   ce qui réinitialise background-size à "auto" — sans marge pour
   glisser, l'animation devient invisible. Sélecteur composé pour
   regagner la priorité indépendamment de l'ordre des règles. */
[data-animate="gradient"][style*="--bg"] { background-size: 200% 200%; }

[data-delay="1"] { animation-delay: 100ms; } [data-delay="2"] { animation-delay: 200ms; }
[data-delay="3"] { animation-delay: 300ms; } [data-delay="4"] { animation-delay: 400ms; }
[data-delay="5"] { animation-delay: 500ms; } [data-delay="6"] { animation-delay: 600ms; }

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


/* ============================================================
   6. TYPOGRAPHIE — Thème « Moderne »
   ============================================================
   Rôles de police, graisse, interlignage et interlettrage — c'est
   ici que se joue la « voix » du thème, au même titre que sa
   palette. Référence --base-font-*, --base-weight-*, --base-leading-*, --base-tracking-* et
   --base-text-* bruts.

   Portée volontairement limitée aux éléments qui définissent la
   voix d'une page (titres, corps, interface, code) : les tailles
   de détail d'interface (badges, légendes, en-têtes de tableau…)
   restent sur l'échelle brute --base-text-* et --base-weight-*, au même titre que
   --base-space-* reste utilisable tel quel dans utilities.css — ce sont
   des primitives de rythme partagées, pas des porteuses de marque.
   Seule la famille de police (--base-font-*) est structurellement
   interdite hors de cette section : c'est elle qui verrouille
   un composant à une identité si on la référence en dur (voir
   le garde-fou stylelint dans tooling/).
   ============================================================ */
:root {
  /* Rôles de police */
  --font-heading: var(--base-font-neo-grotesque);
  --font-body: var(--base-font-neo-grotesque);
  --font-ui: var(--base-font-neo-grotesque);
  --font-code: var(--base-font-mono-code);

  /* Rôles de graisse */
  --weight-display: var(--base-weight-extra);   /* h1 */
  --weight-heading: var(--base-weight-bold);    /* h2 → h6 */
  --weight-body: var(--base-weight-regular);
  --weight-strong: var(--base-weight-semi);
  --weight-ui: var(--base-weight-semi);         /* boutons, nav, labels */

  /* Rôles d'interlignage */
  --leading-heading: var(--base-leading-tight);
  --leading-body: var(--base-leading-normal);
  --leading-paragraph: var(--base-leading-relaxed);

  /* Rôles d'interlettrage */
  --tracking-display: var(--base-tracking-tighter); /* h1 */
  --tracking-heading: var(--base-tracking-tight);   /* h2 → h6 */
  --tracking-ui: var(--base-tracking-wide);         /* boutons */

  /* Tailles sémantiques (titres, corps, petit texte) */
  --size-h1: var(--base-text-4xl);
  --size-h2: var(--base-text-3xl);
  --size-h3: var(--base-text-2xl);
  --size-h4: var(--base-text-xl);
  --size-h5: var(--base-text-lg);
  --size-h6: var(--base-text-md);
  --size-body: var(--base-text-base);
  --size-small: var(--base-text-sm);
}