/* Copie de ep-design-system/tokens.css, version 0.1.3, ne pas modifier ici */
/*
 * Design system du Système (Global) — Couche 1, les fondations.
 * Préfixe des jetons : --gl-*. La Couche 2 (le kit d'une surface : l'App, une page d'artefact) consomme les jetons
 * de rôle, jamais les primitives quand un rôle existe. Écrit à la main ; la vérité du design system vit ici.
 * Version 0.1.0 (25/10/2026, GB25) : proposition, pas encore validée par Léo ; 0.1.3 (29/10/2026, GB48) : la teinte
 * des Remplacements.
 *
 * Fluidité (méthode d'HD) : une valeur va de m à 360 px à D à 1 440 px ;
 * pente = (D − m) / 10,8 vw ; origine = m − (D − m) / 3 px ; clamp(m, pente + origine, D).
 * Restent fixes : bordures, rayons < 16 px, micro-espacements < 20 px, textes ≤ 18 px, icônes, cibles ≥ 44 px.
 */

:root {
  color-scheme: light dark;

  /* ── Teintes ──────────────────────────────────────────────────────────────────────────────────────────────
   * Une teinte = un angle OKLCH ; clarté et chroma sont communs à chaque famille, d'où l'harmonie par construction.
   * Domaines, écartés d'au moins 50° ; moments de la journée : aube orange, ciel de midi, crépuscule violet. */
  --gl-hue-etudes: 228;
  --gl-hue-business: 162;
  --gl-hue-global: 272;
  --gl-hue-hd: 18;
  --gl-hue-musique: 330;
  --gl-hue-sante: 128;
  /* Remplacements (GB48, 29/10/2026 ; Léo : « Les Remplacements sont un domaine en soi ; comme les études ») : l'ambre,
   * à 55° de HD et de Santé. */
  --gl-hue-remplacements: 73;
  /* Operation-Fysak (GB80, 03/11/2026 ; Léo : « Opération Fysak doit être ajouté comme domaine ») : le cyan, au milieu du
   * plus grand écart qui restait, à 33° de Business et d'Études — plus aucun angle n'est à 50° de tous les domaines. */
  --gl-hue-of: 195;
  --gl-hue-matin: 58;
  --gl-hue-midi: 212;
  --gl-hue-soir: 296;

  /* Clarté et chroma par usage (clair). */
  --gl-tint-l: 0.62;
  --gl-tint-c: 0.19;
  --gl-ink-l: 0.48;
  --gl-ink-c: 0.17;
  --gl-wash-a: 0.12;

  /* ── Neutres : un gris légèrement bleuté (teinte de l'accent), jamais un gris pur ── */
  --gl-bg: oklch(0.965 0.006 272);
  --gl-bg-ambient-a: 0.16;
  --gl-surface: oklch(1 0 0);
  --gl-surface-2: oklch(0.975 0.004 272);
  --gl-surface-sunken: oklch(0.94 0.006 272);
  --gl-text: oklch(0.21 0.012 272);
  --gl-text-2: oklch(0.48 0.012 272);
  --gl-text-3: oklch(0.66 0.01 272);
  --gl-separator: oklch(0.21 0.012 272 / 0.12);
  --gl-separator-strong: oklch(0.21 0.012 272 / 0.2);

  /* ── Rôles de couleur ── */
  --gl-accent: oklch(0.54 0.21 var(--gl-hue-global));
  --gl-accent-ink: oklch(0.47 0.2 var(--gl-hue-global));
  --gl-accent-wash: oklch(0.54 0.21 var(--gl-hue-global) / 0.12);
  --gl-on-accent: oklch(1 0 0);
  --gl-success: oklch(0.64 0.17 150);
  --gl-success-wash: oklch(0.64 0.17 150 / 0.14);
  --gl-warning: oklch(0.74 0.16 72);
  --gl-warning-ink: oklch(0.52 0.13 62);
  --gl-critical: oklch(0.6 0.21 25);
  --gl-critical-ink: oklch(0.5 0.19 25);
  --gl-critical-wash: oklch(0.6 0.21 25 / 0.12);
  --gl-skipped: oklch(0.66 0.01 272);

  /* ── Matières : verre (barres, îlot, feuilles) et relief ──
   * Le verre laisse passer le fond coloré ; son liseré clair en haut fait la lumière, l'ombre fait la hauteur. */
  --gl-glass: oklch(1 0 0 / 0.66);
  --gl-glass-strong: oklch(1 0 0 / 0.82);
  --gl-glass-filter: blur(24px) saturate(1.8);
  --gl-glass-rim: inset 0 1px 0 oklch(1 0 0 / 0.75), inset 0 0 0 0.5px oklch(1 0 0 / 0.5);
  --gl-island: oklch(0.16 0.01 272);
  --gl-on-island: oklch(0.97 0 0);
  --gl-on-island-2: oklch(0.97 0 0 / 0.62);

  --gl-shadow-1: 0 1px 2px oklch(0.2 0.02 272 / 0.05), 0 2px 8px oklch(0.2 0.02 272 / 0.05);
  --gl-shadow-2: 0 2px 6px oklch(0.2 0.02 272 / 0.06), 0 12px 28px -8px oklch(0.2 0.02 272 / 0.14);
  --gl-shadow-3: 0 10px 28px -6px oklch(0.2 0.02 272 / 0.18), 0 28px 64px -16px oklch(0.2 0.02 272 / 0.24);
  --gl-rim: inset 0 1px 0 oklch(1 0 0 / 0.9);

  /* ── Typographie : la police d'Apple, par la pile système (rien d'embarqué, aucune licence) ── */
  --gl-font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", system-ui, "Segoe UI", Roboto, sans-serif;
  --gl-font-rounded: ui-rounded, "SF Pro Rounded", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --gl-font-mono: ui-monospace, "SF Mono", Menlo, monospace;

  /* Échelle : fixe jusqu'à 18 px, fluide au-delà (borne haute ≤ 2,5 × borne basse). */
  --gl-text-caption: 12px;
  --gl-text-footnote: 13px;
  --gl-text-subhead: 15px;
  --gl-text-body: 17px;
  --gl-text-title3: clamp(20px, 0.1852vw + 19.3333px, 22px);
  --gl-text-title2: clamp(22px, 0.3704vw + 20.6667px, 26px);
  --gl-text-title1: clamp(28px, 0.5556vw + 26px, 34px);
  --gl-text-large: clamp(34px, 0.9259vw + 30.6667px, 44px);
  --gl-text-display: clamp(48px, 2.5926vw + 38.6667px, 76px);

  --gl-weight-regular: 400;
  --gl-weight-medium: 510;
  --gl-weight-semibold: 600;
  --gl-weight-bold: 700;
  --gl-tracking-tight: -0.022em;
  --gl-tracking-display: -0.035em;
  --gl-tracking-label: 0.06em;
  --gl-leading-body: 1.45;
  --gl-leading-tight: 1.15;
  --gl-measure: 64ch;

  /* ── Espace : base 4 px ; fluide dès 16 px ── */
  --gl-space-3xs: 4px;
  --gl-space-2xs: 8px;
  --gl-space-xs: 12px;
  --gl-space-s: 16px;
  --gl-space-m: clamp(16px, 0.7407vw + 13.3333px, 24px);
  --gl-space-l: clamp(24px, 0.7407vw + 21.3333px, 32px);
  --gl-space-xl: clamp(32px, 1.4815vw + 26.6667px, 48px);
  --gl-space-2xl: clamp(40px, 2.963vw + 29.3333px, 72px);
  --gl-gutter: clamp(16px, 2.2222vw + 8px, 40px);

  /* ── Rayons : continus et concentriques (rayon intérieur = rayon extérieur − marge) ── */
  --gl-radius-xs: 8px;
  --gl-radius-s: 12px;
  --gl-radius-m: clamp(16px, 0.3704vw + 14.6667px, 20px);
  --gl-radius-l: clamp(22px, 0.5556vw + 20px, 28px);
  --gl-radius-xl: clamp(28px, 0.7407vw + 25.3333px, 36px);
  --gl-radius-capsule: 999px;

  /* ── Mouvement ── */
  --gl-ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --gl-ease-spring: cubic-bezier(0.34, 1.4, 0.64, 1);
  --gl-dur-1: 120ms;
  --gl-dur-2: 220ms;
  --gl-dur-3: 360ms;

  /* ── Interaction ── */
  --gl-tap: 44px;
  --gl-focus-ring: 0 0 0 3px oklch(0.54 0.21 var(--gl-hue-global) / 0.35);
  --gl-sidebar: clamp(232px, 3.7037vw + 218.6667px, 272px);
}

/* Le sombre redéfinit les seuls jetons ; aucun composant n'a de couleur propre au thème. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --gl-tint-l: 0.74;
    --gl-tint-c: 0.16;
    --gl-ink-l: 0.8;
    --gl-ink-c: 0.13;
    --gl-wash-a: 0.18;
    --gl-bg: oklch(0.14 0.008 272);
    --gl-bg-ambient-a: 0.22;
    --gl-surface: oklch(0.205 0.01 272);
    --gl-surface-2: oklch(0.245 0.012 272);
    --gl-surface-sunken: oklch(0.17 0.009 272);
    --gl-text: oklch(0.96 0.004 272);
    --gl-text-2: oklch(0.74 0.01 272);
    --gl-text-3: oklch(0.56 0.01 272);
    --gl-separator: oklch(1 0 0 / 0.1);
    --gl-separator-strong: oklch(1 0 0 / 0.18);
    --gl-accent: oklch(0.7 0.16 var(--gl-hue-global));
    --gl-accent-ink: oklch(0.8 0.12 var(--gl-hue-global));
    --gl-accent-wash: oklch(0.7 0.16 var(--gl-hue-global) / 0.2);
    --gl-on-accent: oklch(0.16 0.02 272);
    --gl-success: oklch(0.74 0.16 150);
    --gl-success-wash: oklch(0.74 0.16 150 / 0.18);
    --gl-warning: oklch(0.8 0.14 75);
    --gl-warning-ink: oklch(0.84 0.12 75);
    --gl-critical: oklch(0.7 0.18 25);
    --gl-critical-ink: oklch(0.78 0.14 25);
    --gl-critical-wash: oklch(0.7 0.18 25 / 0.18);
    --gl-skipped: oklch(0.56 0.01 272);
    --gl-glass: oklch(0.22 0.01 272 / 0.6);
    --gl-glass-strong: oklch(0.22 0.01 272 / 0.8);
    --gl-glass-rim: inset 0 1px 0 oklch(1 0 0 / 0.14), inset 0 0 0 0.5px oklch(1 0 0 / 0.12);
    --gl-island: oklch(0.08 0.005 272);
    --gl-shadow-1: 0 1px 2px oklch(0 0 0 / 0.4);
    --gl-shadow-2: 0 2px 6px oklch(0 0 0 / 0.35), 0 12px 28px -8px oklch(0 0 0 / 0.5);
    --gl-shadow-3: 0 10px 28px -6px oklch(0 0 0 / 0.55), 0 28px 64px -16px oklch(0 0 0 / 0.6);
    --gl-rim: inset 0 1px 0 oklch(1 0 0 / 0.07);
    --gl-focus-ring: 0 0 0 3px oklch(0.7 0.16 var(--gl-hue-global) / 0.45);
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --gl-tint-l: 0.74;
  --gl-tint-c: 0.16;
  --gl-ink-l: 0.8;
  --gl-ink-c: 0.13;
  --gl-wash-a: 0.18;
  --gl-bg: oklch(0.14 0.008 272);
  --gl-bg-ambient-a: 0.22;
  --gl-surface: oklch(0.205 0.01 272);
  --gl-surface-2: oklch(0.245 0.012 272);
  --gl-surface-sunken: oklch(0.17 0.009 272);
  --gl-text: oklch(0.96 0.004 272);
  --gl-text-2: oklch(0.74 0.01 272);
  --gl-text-3: oklch(0.56 0.01 272);
  --gl-separator: oklch(1 0 0 / 0.1);
  --gl-separator-strong: oklch(1 0 0 / 0.18);
  --gl-accent: oklch(0.7 0.16 var(--gl-hue-global));
  --gl-accent-ink: oklch(0.8 0.12 var(--gl-hue-global));
  --gl-accent-wash: oklch(0.7 0.16 var(--gl-hue-global) / 0.2);
  --gl-on-accent: oklch(0.16 0.02 272);
  --gl-success: oklch(0.74 0.16 150);
  --gl-success-wash: oklch(0.74 0.16 150 / 0.18);
  --gl-warning: oklch(0.8 0.14 75);
  --gl-warning-ink: oklch(0.84 0.12 75);
  --gl-critical: oklch(0.7 0.18 25);
  --gl-critical-ink: oklch(0.78 0.14 25);
  --gl-critical-wash: oklch(0.7 0.18 25 / 0.18);
  --gl-skipped: oklch(0.56 0.01 272);
  --gl-glass: oklch(0.22 0.01 272 / 0.6);
  --gl-glass-strong: oklch(0.22 0.01 272 / 0.8);
  --gl-glass-rim: inset 0 1px 0 oklch(1 0 0 / 0.14), inset 0 0 0 0.5px oklch(1 0 0 / 0.12);
  --gl-island: oklch(0.08 0.005 272);
  --gl-shadow-1: 0 1px 2px oklch(0 0 0 / 0.4);
  --gl-shadow-2: 0 2px 6px oklch(0 0 0 / 0.35), 0 12px 28px -8px oklch(0 0 0 / 0.5);
  --gl-shadow-3: 0 10px 28px -6px oklch(0 0 0 / 0.55), 0 28px 64px -16px oklch(0 0 0 / 0.6);
  --gl-rim: inset 0 1px 0 oklch(1 0 0 / 0.07);
  --gl-focus-ring: 0 0 0 3px oklch(0.7 0.16 var(--gl-hue-global) / 0.45);
}

/* Les teintes dérivées : une famille se nomme par sa teinte, les trois usages suivent le thème.
 * Usage : data-hue="hd" sur l'élément, puis var(--gl-tint) (aplats, anneaux), var(--gl-ink) (texte),
 * var(--gl-wash) (fonds). Les trois se recalculent sur l'élément qui porte data-hue : une propriété qui en lit une
 * autre se résout là où elle est déclarée, jamais chez l'enfant. */
:root, [data-hue] {
  --gl-tint: oklch(var(--gl-tint-l) var(--gl-tint-c) var(--h));
  --gl-ink: oklch(var(--gl-ink-l) var(--gl-ink-c) var(--h));
  --gl-wash: oklch(var(--gl-tint-l) var(--gl-tint-c) var(--h) / var(--gl-wash-a));
}
:root { --h: var(--gl-hue-global); }
[data-hue="etudes"] { --h: var(--gl-hue-etudes); }
[data-hue="business"] { --h: var(--gl-hue-business); }
[data-hue="global"] { --h: var(--gl-hue-global); }
[data-hue="hd"] { --h: var(--gl-hue-hd); }
[data-hue="musique"] { --h: var(--gl-hue-musique); }
[data-hue="sante"] { --h: var(--gl-hue-sante); }
[data-hue="remplacements"] { --h: var(--gl-hue-remplacements); }
[data-hue="of"] { --h: var(--gl-hue-of); }
[data-hue="matin"] { --h: var(--gl-hue-matin); }
[data-hue="midi"] { --h: var(--gl-hue-midi); }
[data-hue="soir"] { --h: var(--gl-hue-soir); }

@media (prefers-reduced-motion: reduce) {
  :root { --gl-dur-1: 0ms; --gl-dur-2: 0ms; --gl-dur-3: 0ms; }
}