/* MYIG — Design System V2 · jetons (tokens).
   Source unique des couleurs, dégradés, typographie, espacements, géométrie et mouvement.
   Identité : violet #8A2BE2 + orange #FFA500 + blanc #F8F8FF. Aucune couleur de marque bleue.
   Ordre de chargement : tokens.css → components.css → myig.css (coque et écrans). */
:root {
  /* Jetons historiques (v0.x), conservés pour compatibilité ; préférer les jetons V2 ci-dessous */
  --deep: #8A2BE2;        /* violet principal : remplissages, boutons ronds (texte blanc, 5,96:1) */
  --white-blue: #F7F5FB;  /* neutres teintés violet (l'ancienne base bleutée est retirée) */
  --powder: #F1EEF6;
  --glacier: #D5CCE3;
  --slate: #2B3A4A;       /* texte principal */
  --slate-2: #5E6E80;     /* texte secondaire */
  --accent: #8A2BE2;
  --accent-ink: #6B21A8;  /* accent pour le texte, 8,7:1 sur blanc (L1.4 : la palette bleue est retirée) */
  --brand-gradient: linear-gradient(120deg, #9A4FD6 0%, #C97A2A 100%);
  /* Dégradé des actions principales : violet #8A2BE2 → orange #FFA500, reflet blanc fantôme #F8F8FF */
  --act-violet: #8A2BE2; --act-orange: #FFA500; --act-white: #F8F8FF;
  /* L1.4 : sous le texte, le dégradé reste ≥ 5,2:1 avec le blanc (violet #8A2BE2 → prune → orange brûlé) ;
     l'orange principal #FFA500 garde le coin d'arrivée (zone de marge, sans texte) et le halo. */
  --act-gradient: linear-gradient(180deg, rgba(248, 248, 255, .24) 0%, rgba(248, 248, 255, 0) 42%), linear-gradient(115deg, #8A2BE2 0%, #9A2F9C 45%, #A8460F 92%, #FFA500 100%);
  --act-shadow: 0 1px 0 rgba(248, 248, 255, .55) inset, 0 6px 18px rgba(138, 43, 226, .28), 0 3px 10px rgba(255, 165, 0, .32);
  /* Position du pointeur, mise à jour par app.js (effet de halo) */
  --gx: -9999; --gy: -9999; --gxp: .5;
  --line: #E3EBF2;
  --card: #FFFFFF;
  --gi-low: #5E9C7E;   --gi-low-bg: #E4F1EA;
  --gi-mid: #B9852F;   --gi-mid-bg: #F7EEDC;
  --gi-high: #C0605A;  --gi-high-bg: #F7E3E1;
  --radius: 20px;
  --radius-sm: 12px;
  --shadow: 0 1px 2px rgba(43, 58, 74, .05), 0 6px 20px rgba(43, 58, 74, .07);
  --shadow-lift: 0 2px 4px rgba(53, 75, 96, .08), 0 16px 40px rgba(53, 75, 96, .14);
  --font: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --max: 1240px;

  /* ===== Design System V2 (phase 2) ===== */
  /* Couleurs de marque */
  --brand-violet: #8A2BE2;  --brand-orange: #FFA500;  --brand-white: #F8F8FF;
  --violet-50: #F7F0FE; --violet-100: #F3E8FF; --violet-200: #E4CCFB; --violet-600: #7E22CE; --violet-700: #6B21A8; --violet-900: #3B1260;
  --orange-50: #FFF6E5; --orange-100: #FFEBC7; --orange-700: #A8460F; --orange-900: #3B2200;
  /* Fonds et surfaces */
  --bg: #EEF0F3;  --surface: #FFFFFF;  --surface-2: #F7F8FA;  --surface-3: #F1F3F6;  --surface-brand: var(--violet-50);
  /* Textes (contraste sur blanc) */
  --text: var(--slate);            /* 11,6:1 */
  --text-2: #5E6A78;               /* 5,5:1 — texte secondaire, jamais plus clair */
  --text-on-brand: #FFFFFF;        /* ≥ 5,2:1 sur --act-gradient */
  --text-link: var(--violet-700);  /* 8,7:1 */
  /* Bordures */
  --border: #E3E7EC;  --border-strong: #CBD2DA;  --border-brand: rgba(138, 43, 226, .35);
  /* Interactions */
  --hover-tint: rgba(138, 43, 226, .06);  --press-tint: rgba(138, 43, 226, .12);
  --focus-ring: 0 0 0 3px #fff, 0 0 0 5px var(--brand-violet);
  /* États */
  --success: #166534; --success-bg: #E7F7EC;  --warning: #92400E; --warning-bg: #FEF3E2;
  --danger: #A8433D;  --danger-bg: #FDE8E5;   --info: #3B4A5C;    --info-bg: #EEF1F5;
  /* Statuts IG / CG — couleurs métier, toujours accompagnées d'un mot (bas, moyen, élevé) */
  --gi-low-ink: #3D7259; --gi-mid-ink: #86601F; --gi-high-ink: #9B4640;
  /* Séries de graphiques (distinctes, sans bleu de marque ; motif ou libellé toujours présent) */
  --series-1: #8A2BE2; --series-2: #B45309; --series-3: #0F766E; --series-4: #BE185D; --series-5: #475569;

  /* Dégradés */
  --grad-brand: linear-gradient(115deg, #8A2BE2 0%, #FFA500 100%);         /* décor, jamais sous du texte */
  --grad-action: var(--act-gradient);                                      /* boutons principaux, texte blanc */
  --grad-soft: linear-gradient(135deg, #F3E8FF 0%, #FFF1DC 100%);           /* fonds doux, vignettes */
  --grad-hover: linear-gradient(115deg, rgba(138, 43, 226, .10), rgba(255, 165, 0, .10));
  --grad-focus: linear-gradient(115deg, #8A2BE2, #FFA500);

  /* Typographie — échelle 1,2 arrondie */
  --fs-xs: 12px; --fs-sm: 13.5px; --fs-md: 15px; --fs-lg: 17px; --fs-xl: 20px; --fs-2xl: 24px; --fs-3xl: 32px; --fs-display: clamp(28px, 4vw, 40px);
  --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; --fw-heavy: 800;
  --lh-tight: 1.2; --lh-snug: 1.35; --lh-body: 1.55;
  --ls-tight: -.02em; --ls-normal: 0; --ls-caps: .04em;

  /* Espacements — grille de 4 px */
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px; --sp-12: 48px;

  /* Géométrie */
  --r-xs: 6px; --r-sm: 12px; --r-md: 16px; --r-lg: 20px; --r-xl: 28px; --r-pill: 999px;
  --shadow-1: 0 1px 2px rgba(43, 58, 74, .05), 0 6px 20px rgba(43, 58, 74, .07);
  --shadow-2: 0 2px 4px rgba(43, 58, 74, .08), 0 16px 40px rgba(43, 58, 74, .14);
  --shadow-glass: 0 1px 0 rgba(255, 255, 255, .9) inset, 0 6px 20px rgba(43, 58, 74, .10);
  --control-h: 44px;      /* champs et boutons : cible tactile confortable */
  --control-h-sm: 36px;   /* boutons compacts (souris) — jamais sous 24 px (WCAG 2.2, 2.5.8) */
  --target-min: 24px;
  --content-max: 1240px; --reading-max: 68ch;

  /* Mouvement */
  --dur-1: 120ms; --dur-2: 200ms; --dur-3: 320ms;
  --ease-out: cubic-bezier(.2, .8, .2, 1); --ease-in-out: cubic-bezier(.4, 0, .2, 1); --ease-spring: cubic-bezier(.34, 1.4, .64, 1);

  /* Ambiance (UX8.6) : fonds pastel diffus, surface principale blanc chaud. Aucun bleu, aucun aplat saturé. */
  --amb-lilac: #F0E7F9;      /* fond général */
  --amb-powder: #EADCF7;     /* violet poudré, halos diffus — pas de texte secondaire dessus */
  --amb-peach: #FFE8D0;      /* pêche claire, halos diffus */
  --amb-warm: #FFFCFA;       /* blanc chaud : grande surface de contenu */
  --amb-hero: radial-gradient(70% 90% at 0% 0%, #F3E9FC 0%, rgba(243, 233, 252, 0) 70%), radial-gradient(60% 80% at 100% 100%, #FFF0E0 0%, rgba(255, 240, 224, 0) 70%), linear-gradient(120deg, #F7F0FD 0%, #FFF3E6 100%);
  --nav-ink: #4A5462;        /* libellés de navigation sur fond pastel : ≥ 5:1 même sur le violet poudré */
  --r-surface: 36px;
  --shadow-surface: 0 1px 2px rgba(59, 18, 96, .04), 0 24px 60px rgba(59, 18, 96, .08);
  --shadow-card: 0 1px 2px rgba(59, 18, 96, .04), 0 8px 24px rgba(59, 18, 96, .06);

  /* Plans */
  --z-nav: 40; --z-drawer: 60; --z-dialog: 80; --z-toast: 100;
}
@media (prefers-reduced-motion: reduce) {
  :root { --dur-1: 0ms; --dur-2: 0ms; --dur-3: 0ms; }
}