/**
 * MageTicket
 *
 * Fichier        : public/assets/css/tokens.css
 * Rôle           : Source de vérité unique des tokens visuels, thèmes, géométrie et mouvement.
 * Auteur         : Régis KREMER
 * Version        : 0.33.0
 * Version projet : 0.33.0
 * Lot            : MAGETICKET DESIGN PORTAL GATEWAY PUBLIC PAGES1
 * Base requise   : 0.32.0
 * Créé le        : 2026-07-22
 * Modifié le     : 2026-07-23
 * Dépendances    : CSS Color 4, env() et préférences système du navigateur.
 * Contraintes    : aucun composant métier ; contrastes WCAG contrôlés ; compatibilité progressive.
 * Modifications  : ajout des tokens de géométrie de barre de page, de la palette d’identification des avatars et de l’encre lisible de la passerelle.
 */

:root {
  color-scheme: dark;
  --bg: #07111f;
  --bg-deep: #030914;
  --surface: #0d1a2b;
  --surface-2: #12243a;
  --surface-3: #18304c;
  --surface-soft: #102137;
  --surface-raised: #1d3b5d;
  --text: #f4f7ff;
  --muted: #b0bfd4;
  --muted-2: #8fa0b8;
  --text-inverse: #ffffff;
  --brand: #8055ff;
  --brand-strong: #6846e8;
  --brand-soft: #2d235f;
  --brand-contrast: #ffffff;
  --info: #61a8ff;
  --info-soft: #102e52;
  --info-strong: #70b2ff;
  --success: #43d39b;
  --success-soft: #103b31;
  --success-strong: #5ce0ad;
  --warning: #ffb44c;
  --warning-soft: #452f10;
  --warning-strong: #ffc267;
  --danger: #ff6974;
  --danger-soft: #4a2029;
  --danger-strong: #ff8790;
  --line: #29405e;
  --line-strong: #55769e;
  --focus: #a8caff;
  --shadow-1: 0 8px 24px rgb(0 0 0 / 22%);
  --shadow-2: 0 14px 34px rgb(0 0 0 / 30%);
  --shadow-3: 0 24px 64px rgb(0 0 0 / 42%);
  --gateway-start: #17132f;
  --gateway-end: #2e2462;
  --selection-bg: #6846e8;
  --selection-text: #ffffff;

  --r-ctrl: 2px;
  --r-xs: 2px;
  --r-sm: 4px;
  --r-md: 6px;
  --r-lg: 8px;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 32px;
  --space-8: 40px;

  --dur-1: 120ms;
  --dur-2: 180ms;
  --dur-3: 260ms;
  --ease: cubic-bezier(.2, .7, .3, 1);

  --font-sans: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --fs-xs: 11px;
  --fs-sm: 12px;
  --fs-base: 13.5px;
  --fs-md: 15px;
  --fs-lg: 18px;
  --fs-xl: 22px;
  --fs-2xl: 28px;
  --fw-body: 450;
  --fw-label: 550;
  --fw-title: 700;

  --icon-sm: 14px;
  --icon-md: 18px;
  --icon-lg: 22px;

  --safe-top: env(safe-area-inset-top, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
  --topbar-h: 58px;
  --sidebar-w: 212px;
  --sidebar-w-collapsed: 64px;
  --touch-target: 44px;
  --keyboard-inset: 0px;
  --visual-viewport-height: 100dvh;
  --footer-h: 30px;

  /* Aliases de transition, à supprimer centre par centre pendant la migration. */
  --blue: var(--info);
  --green: var(--success);
  --orange: var(--warning);
  --red: var(--danger);
  --ok: var(--success);
  --warn: var(--warning);
  --accent: var(--brand);
  --brand-2: var(--brand-strong);
  --shadow: var(--shadow-1);
  --panel: var(--surface);
  --page-bg: var(--bg);
  --color-accent: var(--brand);
  --color-bg: var(--bg);
  --rail: var(--surface-2);
  --rail-active: var(--brand);
  --panel-grad: linear-gradient(145deg, var(--surface), var(--surface-2));
  --tip-neutral: var(--surface-3);
  --tip-info: var(--info-soft);
  --tip-ok: var(--success-soft);
  --tip-warning: var(--warning-soft);
  --tip-alert: var(--danger-soft);
  --portal-keyboard-inset: var(--keyboard-inset);
  --portal-viewport-h: var(--visual-viewport-height);
  --shell-topbar-height: var(--topbar-h);
  --shell-mobile-nav-height: 64px;
  --shell-tablet-rail-width: var(--sidebar-w-collapsed);
  --workspace-peek-h: 0px;
  --ribbon-h: 0px;

  /* Géométrie des barres de page et des en-têtes de panneau. */
  --pagebar-h: 52px;
  --panel-head-h: 44px;
  --cockpit-gap: var(--space-2);
  --cockpit-pad: var(--space-3);

  /* Palette d'identification des interlocuteurs (avatars).
     Valeurs communes aux deux thèmes : le texte porté est toujours --brand-contrast. */
  --seed-0: #5b3fc4;
  --seed-1: #1b6a4b;
  --seed-2: #1a559e;
  --seed-3: #8a4a06;
  --seed-4: #9a2c4c;
  --seed-5: #0f5f66;

  /* Passerelle publique : encre lisible sur le dégradé de marque. */
  --gateway-ink: var(--text);
  --gateway-ink-muted: var(--muted);
  --gateway-line: color-mix(in srgb, var(--brand) 34%, var(--line));

  /* Dégradé de marque clair, utilisé par les barres de progression. */
  --brand-light: color-mix(in srgb, var(--brand) 76%, var(--brand-contrast));
  /* Anneau de focus du mode contraste renforcé du système. */
  --focus-contrast: #ffd54a;
}

html[data-theme="dark"] {
  color-scheme: dark;
}

html[data-theme="light"] {
  color-scheme: light;
  --bg: #edf2f9;
  --bg-deep: #f8faff;
  --surface: #ffffff;
  --surface-2: #f6f8fc;
  --surface-3: #e9eff7;
  --surface-soft: #f2f5fa;
  --surface-raised: #e2eaf5;
  --text: #13213a;
  --muted: #59697f;
  --muted-2: #68778c;
  --text-inverse: #ffffff;
  --brand: #6745e8;
  --brand-strong: #5735d2;
  --brand-soft: #e8e2ff;
  --brand-contrast: #ffffff;
  --info: #1263b8;
  --info-soft: #e2f0ff;
  --info-strong: #0c559e;
  --success: #176f50;
  --success-soft: #dff5eb;
  --success-strong: #125e43;
  --warning: #8c5700;
  --warning-soft: #fff0ce;
  --warning-strong: #734700;
  --danger: #b32635;
  --danger-soft: #ffe3e7;
  --danger-strong: #941d2a;
  --line: #d6dfeb;
  --line-strong: #68778c;
  --focus: #1e5cab;
  --shadow-1: 0 8px 24px rgb(36 54 83 / 10%);
  --shadow-2: 0 14px 34px rgb(36 54 83 / 16%);
  --shadow-3: 0 24px 64px rgb(36 54 83 / 24%);
  --gateway-start: #f3efff;
  --gateway-end: #d9d0ff;
  --selection-bg: #d9d0ff;
  --selection-text: #251753;
  --gateway-ink: #241456;
  --gateway-ink-muted: #4c3a86;
  --gateway-line: color-mix(in srgb, var(--brand) 26%, var(--line));
}

@media (prefers-color-scheme: light) {
  html:not([data-theme]) {
    color-scheme: light;
    --bg: #edf2f9;
    --bg-deep: #f8faff;
    --surface: #ffffff;
    --surface-2: #f6f8fc;
    --surface-3: #e9eff7;
    --surface-soft: #f2f5fa;
    --surface-raised: #e2eaf5;
    --text: #13213a;
    --muted: #59697f;
    --muted-2: #68778c;
    --brand: #6745e8;
    --brand-strong: #5735d2;
    --brand-soft: #e8e2ff;
    --info: #1263b8;
    --info-soft: #e2f0ff;
    --info-strong: #0c559e;
    --success: #176f50;
    --success-soft: #dff5eb;
    --success-strong: #125e43;
    --warning: #8c5700;
    --warning-soft: #fff0ce;
    --warning-strong: #734700;
    --danger: #b32635;
    --danger-soft: #ffe3e7;
    --danger-strong: #941d2a;
    --line: #d6dfeb;
    --line-strong: #68778c;
    --focus: #1e5cab;
    --shadow-1: 0 8px 24px rgb(36 54 83 / 10%);
    --shadow-2: 0 14px 34px rgb(36 54 83 / 16%);
    --shadow-3: 0 24px 64px rgb(36 54 83 / 24%);
    --gateway-start: #f3efff;
    --gateway-end: #d9d0ff;
    --selection-bg: #d9d0ff;
    --selection-text: #251753;
  --gateway-ink: #241456;
  --gateway-ink-muted: #4c3a86;
  --gateway-line: color-mix(in srgb, var(--brand) 26%, var(--line));
  }
}