/*
 * Projet          : MageKorp Hub
 * Fichier         : public/assets/css/tokens.css
 * Rôle            : Tokens et thèmes du design system
 * Auteur          : Régis KREMER
 * Version fichier : 2.0.0
 * Version générale: 0.24.0
 * Lot             : MAGEKORP HUB SECURITY ACCESSIBILITY PRIVACY RECETTE1
 * Base requise    : MageKorp Hub 0.23.0
 * Créé le         : 2026-07-23
 * Modifié le      : 2026-07-23
 * Contraintes     : CSP stricte, responsive, accessibilité WCAG 2.2 AA
 */
@layer tokens {
:root {
  color-scheme: light dark;
  --font-sans: Inter, Aptos, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-mono: "Cascadia Code", "SFMono-Regular", Consolas, monospace;
  --type-xs: .75rem; --type-sm: .875rem; --type-md: 1rem; --type-lg: 1.125rem;
  --type-xl: clamp(1.35rem, 1.1rem + .7vw, 1.75rem);
  --type-2xl: clamp(1.8rem, 1.25rem + 1.7vw, 2.75rem);
  --type-display: clamp(2.15rem, 1.25rem + 3.2vw, 4.5rem);
  --line-tight: 1.08; --line-heading: 1.2; --line-body: 1.6;
  --space-1: .25rem; --space-2: .5rem; --space-3: .75rem; --space-4: 1rem;
  --space-5: 1.25rem; --space-6: 1.5rem; --space-8: 2rem; --space-10: 2.5rem;
  --space-12: 3rem; --space-16: 4rem; --space-20: 5rem;
  --radius-xs: 3px; --radius-sm: 6px; --radius-md: 10px; --radius-lg: 14px;
  --shadow-sm: 0 1px 2px rgb(3 15 31 / .08), 0 6px 18px rgb(3 15 31 / .06);
  --shadow-lg: 0 20px 60px rgb(1 10 24 / .22);
  --container: 92rem; --content: 78rem; --header-height: 4.5rem;
  --duration-fast: 140ms; --duration: 220ms; --ease: cubic-bezier(.2,.8,.2,1);
  --z-header: 50; --z-overlay: 70; --z-toast: 100;

  --navy-950: #030b14; --navy-900: #061321; --navy-850: #0a192a; --navy-800: #0d2035;
  --navy-700: #15304d; --navy-600: #234361; --navy-500: #47617c;
  --blue-700: #0051a8; --blue-600: #0067d6; --blue-500: #1684f8; --blue-200: #b9dcff; --blue-100: #e7f3ff;
  --orange-700: #b93f00; --orange-600: #d94f00; --orange-500: #ff6a00; --orange-100: #fff0e5;
  --green-700: #176238; --green-100: #dcf5e5; --yellow-700: #715600; --yellow-100: #fff3bf;
  --red-700: #a52626; --red-100: #ffe4e4;
  --neutral-0: #fff; --neutral-25: #fbfcfe; --neutral-50: #f5f7fa; --neutral-100: #edf1f5;
  --neutral-200: #d9e0e8; --neutral-300: #bec9d5; --neutral-500: #64748b; --neutral-700: #34465d; --neutral-900: #0b1726;

  --surface-page: var(--neutral-50); --surface-1: var(--neutral-0); --surface-2: var(--neutral-25);
  --surface-brand: var(--navy-900); --surface-brand-elevated: var(--navy-850);
  --text-strong: #0b2342; --text: #263b57; --text-muted: #586a82; --text-on-brand: #f8fbff; --text-on-brand-muted: #b7c6d8;
  --border: #dbe3ec; --border-strong: #bcc9d7; --divider: #e6ebf1;
  --action-primary: var(--blue-600); --action-primary-hover: var(--blue-700); --text-on-primary: #fff;
  --action-accent: var(--orange-700); --action-accent-hover: #8f3100; --text-on-accent: #fff;
  --focus: #b93f00; --selection: #b9dcff;
}

:root[data-theme="dark"] {
  --surface-page: #06111d; --surface-1: #0a1726; --surface-2: #0d1c2d;
  --surface-brand: #030b14; --surface-brand-elevated: #081727;
  --text-strong: #f7fbff; --text: #d8e2ed; --text-muted: #9db0c4;
  --border: #22364b; --border-strong: #35506d; --divider: #1b2e42;
  --action-primary: #208cf7; --action-primary-hover: #53a7fa; --text-on-primary: #06111d;
  --action-accent: #ff711a; --action-accent-hover: #ff914d; --text-on-accent: #06111d;
  --focus: #ff8a2d; --selection: #184b76;
}

@media (prefers-color-scheme: dark) {
  :root[data-theme="system"] {
    --surface-page: #06111d; --surface-1: #0a1726; --surface-2: #0d1c2d;
    --surface-brand: #030b14; --surface-brand-elevated: #081727;
    --text-strong: #f7fbff; --text: #d8e2ed; --text-muted: #9db0c4;
    --border: #22364b; --border-strong: #35506d; --divider: #1b2e42;
    --action-primary: #208cf7; --action-primary-hover: #53a7fa;
    --action-accent: #ff711a; --action-accent-hover: #ff914d;
    --selection: #184b76;
  }
}
}