/*
 * Nova UI : jetons de design (seul fichier du module où figurent des valeurs de couleur).
 * Les variables seules ne stylent rien : elles sont posées sur :root sans risque de fuite.
 * Thème sombre : html[data-nui-theme="dark"], posé avant le premier rendu par le script
 * d'amorçage (préférence du membre ou de l'appareil).
 */
:root {
    /* Accent (réglable : --nui-accent est réécrit en ligne par le script d'amorçage) */
    --nui-accent: #2563EB;
    --nui-accent-hover: color-mix(in srgb, var(--nui-accent) 86%, #000000);
    --nui-accent-soft: color-mix(in srgb, var(--nui-accent) 10%, transparent);
    --nui-accent-ring: color-mix(in srgb, var(--nui-accent) 35%, transparent);
    --nui-on-accent: #FFFFFF;
    /* Couleur secondaire de la charte (filet actif, bandeaux) ; par défaut l'accent */
    --nui-highlight: var(--nui-accent);
    /* Texte et liens couleur d'accent (éclairci en thème sombre pour rester AA) */
    --nui-accent-text: var(--nui-accent);

    /* Surfaces */
    --nui-bg: #F5F6F8;
    --nui-surface: #FFFFFF;
    --nui-surface-2: #F8FAFC;
    --nui-surface-3: #EEF2F6;
    --nui-hover: #F1F5F9;
    --nui-overlay: rgba(15, 23, 42, 0.45);

    /* Barre latérale (sombre dans les deux thèmes) */
    --nui-side-bg: #0F172A;
    --nui-side-bg-2: color-mix(in srgb, var(--nui-side-bg) 94%, #FFFFFF);
    --nui-side-text: #CBD5E1;
    --nui-side-muted: #94A3B8;
    --nui-side-active: #FFFFFF;
    /* Titre du bandeau projet : bleu ciel sur fond marine (contraste 10:1) */
    --nui-hero-title: #7DD3FC;
    --nui-side-border: rgba(148, 163, 184, 0.14);

    /* Bandeau d'accueil personnel : carte ardoise et indicateurs lumineux (deux thèmes) */
    --nui-me-bg-a: #3B4157;
    --nui-me-bg-b: #22263A;
    --nui-me-edge: rgba(255, 255, 255, 0.14);
    --nui-me-shine: rgba(255, 255, 255, 0.10);
    --nui-me-track: rgba(255, 255, 255, 0.10);
    --nui-me-text: #FFFFFF;
    --nui-me-muted: #B4BCD0;
    --nui-me-blue: #7DA7FF;
    --nui-me-mint: #7CF2C2;
    --nui-me-pink: #FF8FC0;
    --nui-me-violet-a: #A794FF;
    --nui-me-violet-b: #7A6CF0;
    /* Barre tricolore du bas du bandeau (reprise du bandeau d'expatpro) */
    --nui-me-stripe-1: #3489C8;
    --nui-me-stripe-2: #D0A23E;
    --nui-me-stripe-3: #D84B54;
    --nui-me-shadow: 0 30px 60px -28px rgba(15, 23, 42, 0.55), 0 12px 24px -12px rgba(15, 23, 42, 0.35);
    --nui-glass: rgba(255, 255, 255, 0.06);
    --nui-glass-hover: rgba(255, 255, 255, 0.12);
    --nui-arc-line: rgba(255, 255, 255, 0.10);
    --nui-arc-fill: rgba(255, 255, 255, 0.03);
    --nui-arc-fill-2: rgba(255, 255, 255, 0.02);
    --nui-shadow-header: 0 6px 20px -12px rgba(2, 6, 23, 0.6);
    --nui-shadow-hero: 0 24px 48px -28px rgba(2, 6, 23, 0.55);

    /* Texte */
    --nui-text: #0F172A;
    --nui-text-2: #334155;
    --nui-muted: #5F6E82;
    --nui-subtle: #94A3B8;

    /* Bordures */
    --nui-border: #E2E8F0;
    --nui-border-strong: #CBD5E1;
    --nui-divider: #EEF2F6;

    /* Sémantique : fond doux + texte foncé (contraste AA sur le fond doux) */
    --nui-success: #067647;
    --nui-success-soft: #ECFDF3;
    --nui-warning: #93370D;
    --nui-warning-soft: #FFFAEB;
    --nui-danger: #B42318;
    --nui-danger-soft: #FEF3F2;
    --nui-info: #175CD3;
    --nui-info-soft: #EFF8FF;
    --nui-neutral: #344054;
    --nui-neutral-soft: #F2F4F7;
    --nui-danger-solid: #D92D20;
    --nui-success-solid: #067647;
    --nui-info-solid: #0369A1;
    --nui-warning-solid: #B54708;

    /* Typographie (Inter est déjà chargée par le cœur) */
    --nui-font: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
    --nui-fs-xs: 0.75rem;
    --nui-fs-sm: 0.8125rem;
    --nui-fs-base: 0.875rem;
    --nui-fs-md: 0.9375rem;
    --nui-fs-lg: 1.125rem;
    --nui-fs-xl: 1.5rem;
    --nui-fs-2xl: 1.75rem;

    /* Espacements (pas de 4 px) */
    --nui-space-1: 4px;
    --nui-space-2: 8px;
    --nui-space-3: 12px;
    --nui-space-4: 16px;
    --nui-space-5: 20px;
    --nui-space-6: 24px;
    --nui-space-8: 32px;

    /* Rayons */
    --nui-radius-sm: 6px;
    --nui-radius: 8px;
    --nui-radius-lg: 12px;
    --nui-radius-xl: 16px;
    --nui-radius-pill: 999px;

    /* Élévation */
    --nui-shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.05);
    --nui-shadow-sm: 0 1px 3px rgba(15, 23, 42, 0.08), 0 1px 2px rgba(15, 23, 42, 0.04);
    --nui-shadow-md: 0 6px 16px -4px rgba(15, 23, 42, 0.10), 0 2px 4px -2px rgba(15, 23, 42, 0.06);
    --nui-shadow-lg: 0 18px 40px -12px rgba(15, 23, 42, 0.22);
    --nui-focus: 0 0 0 3px var(--nui-accent-ring);

    /* Mouvement */
    --nui-ease-out: cubic-bezier(0.22, 1, 0.36, 1);
    --nui-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
    --nui-dur-fast: 120ms;
    --nui-dur: 180ms;
    --nui-dur-slow: 320ms;
    --nui-stagger: 30ms;

    /* Hauteurs de contrôle */
    --nui-control-h: 38px;
    --nui-touch: 44px;

    /* Cartes KPI en dégradé pastel (une teinte par sens : rose retard, menthe payé, ambre attente,
       lavande information, gris neutre) : texte foncé, formes douces, flèche d'accès */
    --nui-grad-info-a: #C9C8FB;
    --nui-grad-info-b: #EEEDFE;
    --nui-grad-success-a: #A4EEDC;
    --nui-grad-success-b: #E3FBF4;
    --nui-grad-warning-a: #FFD9A8;
    --nui-grad-warning-b: #FFF3E3;
    --nui-grad-danger-a: #F8B7D0;
    --nui-grad-danger-b: #FDE7F0;
    --nui-grad-default-a: #D9E0EA;
    --nui-grad-default-b: #F3F6F9;
    /* Variantes de teinte : une carte ne reprend jamais la couleur d'une voisine de la même grille */
    --nui-grad-peach-a: #FFC9B0;
    --nui-grad-peach-b: #FFEDE4;
    --nui-grad-lime-a: #D4F5A0;
    --nui-grad-lime-b: #F3FCE4;
    --nui-grad-teal-a: #9EE6F0;
    --nui-grad-teal-b: #E2F8FB;
    --nui-grad-sky-a: #B5D8FD;
    --nui-grad-sky-b: #E8F3FF;
    --nui-grad-violet-a: #E2B8F7;
    --nui-grad-violet-b: #F6EAFD;
    --nui-kpi-ink: #0F172A;
    --nui-kpi-ink-2: #334155;
    --nui-kpi-blob: rgba(255, 255, 255, 0.45);
    --nui-kpi-chip: rgba(255, 255, 255, 0.78);
    --nui-kpi-edge: rgba(255, 255, 255, 0.7);
    --nui-event-wash: rgba(255, 255, 255, 0.68);
    --nui-art-shadow: 0 10px 16px rgba(2, 6, 23, 0.28);
    --nui-auth-pattern: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160' fill='none' stroke='%2313386B' stroke-opacity='0.07' stroke-width='2'%3E%3Ccircle cx='30' cy='30' r='14'/%3E%3Crect x='100' y='18' width='26' height='26' rx='6' transform='rotate(18 113 31)'/%3E%3Cpath d='M30 104 l18 30 h-36 z'/%3E%3Cpath d='M104 112 h28 M118 98 v28'/%3E%3C/svg%3E");
    --nui-shadow-pop: 0 6px 14px -12px rgba(15, 23, 42, 0.35);
    --nui-kpi-hole: #FFFFFF;
    --nui-kpi-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230F172A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E");

    /* Halo décoratif des bandeaux (immersif) */
    --nui-hero-glow: radial-gradient(1200px 300px at 0% 0%, color-mix(in srgb, var(--nui-highlight) 22%, transparent), transparent 60%),
        radial-gradient(800px 260px at 100% 0%, rgba(124, 58, 237, 0.16), transparent 60%);
}

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

    --nui-accent-hover: color-mix(in srgb, var(--nui-accent) 80%, #FFFFFF);
    --nui-accent-soft: color-mix(in srgb, var(--nui-accent) 22%, transparent);
    --nui-accent-text: color-mix(in srgb, var(--nui-accent) 55%, #FFFFFF);

    --nui-bg: #0B1120;
    --nui-surface: #111827;
    --nui-surface-2: #0F172A;
    --nui-surface-3: #1E293B;
    --nui-hover: #1A2335;
    --nui-overlay: rgba(2, 6, 23, 0.65);

    --nui-side-bg: #070B16;
    --nui-me-bg-a: #262B3E;
    --nui-me-bg-b: #141826;
    --nui-me-shadow: 0 30px 60px -28px rgba(0, 0, 0, 0.8);

    --nui-text: #E5E7EB;
    --nui-text-2: #CBD5E1;
    --nui-muted: #94A3B8;
    --nui-subtle: #7C8BA1;

    --nui-border: #243045;
    --nui-border-strong: #334155;
    --nui-divider: #1C2638;

    --nui-success: #75E0A7;
    --nui-success-soft: rgba(7, 148, 85, 0.18);
    --nui-warning: #FEC84B;
    --nui-warning-soft: rgba(220, 104, 3, 0.18);
    --nui-danger: #FDA29B;
    --nui-danger-soft: rgba(217, 45, 32, 0.20);
    --nui-info: #84CAFF;
    --nui-info-soft: rgba(46, 144, 250, 0.18);
    --nui-neutral: #D0D5DD;
    --nui-neutral-soft: rgba(152, 162, 179, 0.16);

    --nui-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.4);
    --nui-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.45);
    --nui-shadow-md: 0 8px 20px -6px rgba(0, 0, 0, 0.55);
    --nui-shadow-lg: 0 20px 44px -12px rgba(0, 0, 0, 0.7);
    --nui-grad-info-a: #3A3982;
    --nui-grad-info-b: #1C1D3F;
    --nui-grad-success-a: #0F5E50;
    --nui-grad-success-b: #0E2B2A;
    --nui-grad-warning-a: #6B4415;
    --nui-grad-warning-b: #2A1F12;
    --nui-grad-danger-a: #6E2346;
    --nui-grad-danger-b: #2B1522;
    --nui-grad-default-a: #2A3446;
    --nui-grad-default-b: #172031;
    --nui-grad-peach-a: #6E3420;
    --nui-grad-peach-b: #2B1712;
    --nui-grad-lime-a: #3F5C14;
    --nui-grad-lime-b: #1C2610;
    --nui-grad-teal-a: #0E5560;
    --nui-grad-teal-b: #0E2529;
    --nui-grad-sky-a: #1E4677;
    --nui-grad-sky-b: #121F33;
    --nui-grad-violet-a: #5A2A78;
    --nui-grad-violet-b: #24152F;
    --nui-kpi-ink: #F8FAFC;
    --nui-kpi-ink-2: #CBD5E1;
    --nui-kpi-blob: rgba(255, 255, 255, 0.06);
    --nui-kpi-chip: rgba(255, 255, 255, 0.12);
    --nui-kpi-edge: rgba(255, 255, 255, 0.08);
    --nui-event-wash: rgba(17, 24, 39, 0.55);
    --nui-auth-pattern: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160' fill='none' stroke='%23FFFFFF' stroke-opacity='0.05' stroke-width='2'%3E%3Ccircle cx='30' cy='30' r='14'/%3E%3Crect x='100' y='18' width='26' height='26' rx='6' transform='rotate(18 113 31)'/%3E%3Cpath d='M30 104 l18 30 h-36 z'/%3E%3Cpath d='M104 112 h28 M118 98 v28'/%3E%3C/svg%3E");
    --nui-shadow-pop: 0 6px 14px -10px rgba(0, 0, 0, 0.6);
    --nui-kpi-hole: #0B1120;
    --nui-kpi-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23F8FAFC' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E");
}