/* =====================================================================
   DASH ALTA – JETONS DU THÈME « Nuit & Lavande » (source unique)
   ---------------------------------------------------------------------
   Architecture CSS :
     tokens.css  -> variables (ce fichier, chargé en premier)
     theme.css   -> base, contrôles, Syncfusion, formulaires, modales
     layout.css  -> coque : sidebar, header mobile, zone de contenu
     ds.css      -> composants (ds-*, panel, kpi-board) + pages
   Identité tirée du logo (blanc + dégradé bleu → violet) :
     - navigation (sidebar + header) bleu nuit profond, dans les deux thèmes,
       pour faire ressortir le logo ;
     - fond de page légèrement teinté (bleu-lavande en clair, graphite bleuté
       en sombre) et cartes nettement différenciées ;
     - bleu = accent principal, violet = accent secondaire, le dégradé du logo
       n'apparaît que sur quelques repères (lien actif, avatar, indicateur clé).
   Les anciens noms (--ui-*, --alta-*, --bg-main…) sont des ALIAS de ces jetons :
   ne jamais leur donner de valeur ailleurs.
   ===================================================================== */

:root {
    /* Typographie, rythme, mouvement (indépendants du thème) */
    --font: "Inter", "Segoe UI", Roboto, system-ui, sans-serif;
    --fs-xs: 12px; --fs-sm: 13px; --fs: 14px; --fs-md: 16px; --fs-lg: 20px; --fs-xl: 28px;
    --radius-sm: 8px;
    --radius: 12px;
    --radius-lg: 16px;
    --space: 16px;
    --gap: 12px;
    --ease: cubic-bezier(.2, .7, .3, 1);
    --fast: 140ms;
    --med: 220ms;
    --tap: 44px;
    --ctl: 40px;

    /* Couleurs du logo */
    --brand-blue: #4f7cff;
    --brand-violet: #9b5cf6;
    --brand-gradient: linear-gradient(90deg, #4f7cff 0%, #9b5cf6 100%);
}
@media (pointer: fine) { :root { --ctl: 36px; } }

/* ---------- Thème clair ---------- */
:root, html body {
    color-scheme: light;
    --background: #f1f3fa;
    --surface: #ffffff;
    --surface-2: #f7f8fc;
    --surface-hover: #eef1f9;
    --surface-sunken: #e8ebf5;
    --text-primary: #0e1630;
    --text-secondary: #4e5874;
    --text-tertiary: #848ca6;
    --border: #e0e4f0;
    --border-strong: #ccd2e3;
    --accent: #3d5cff;
    --accent-hover: #2c47e6;
    --accent-soft: rgba(61, 92, 255, .09);
    --accent-text: #2f49d9;
    --accent-2: #8b5cf6;
    --accent-2-soft: rgba(139, 92, 246, .10);
    --on-accent: #ffffff;
    --input: #ffffff;
    --shadow-sm: 0 1px 2px rgba(14, 22, 48, .06);
    --shadow: 0 1px 3px rgba(14, 22, 48, .07), 0 6px 16px -10px rgba(14, 22, 48, .14);
    --shadow-lg: 0 24px 48px -12px rgba(14, 22, 48, .28);
    --focus-ring: 0 0 0 3px rgba(61, 92, 255, .2);
    --success: #15803d; --success-bg: #e6f5ec; --success-text: #106b37;
    --warning: #b45309; --warning-bg: #fcf1e1; --warning-text: #8a4b06;
    --danger: #c02626;  --danger-bg: #fcebec;  --danger-text: #9b1c1c;
    --info: #3d5cff;    --info-bg: #eaeeff;    --info-text: #2f49d9;
    --chart-grid: #e8ebf3; --chart-text: #66708a;
    --tooltip-bg: #0d1530; --tooltip-border: rgba(13, 21, 48, .9); --tooltip-text: #ffffff;
    --highlight: linear-gradient(135deg, rgba(79, 124, 255, .10) 0%, rgba(155, 92, 246, .07) 55%, rgba(155, 92, 246, 0) 100%);

    /* Navigation (sidebar + header) : bleu nuit profond */
    --nav-bg: #0d1530;
    --nav-bg-raised: rgba(255, 255, 255, .05);
    --nav-border: rgba(255, 255, 255, .07);
    --nav-text: #b3bcd8;
    --nav-text-strong: #ffffff;
    --nav-muted: #717da2;
    --nav-hover: rgba(255, 255, 255, .05);
    --nav-active: rgba(255, 255, 255, .08);
    --nav-active-icon: #a4b5ff;
    --nav-focus: 0 0 0 2px rgba(164, 181, 255, .55);
}

/* ---------- Thème sombre (graphite bleuté) ---------- */
html body.dark {
    color-scheme: dark;
    --background: #0a0f1f;
    --surface: #121a30;
    --surface-2: #151e37;
    --surface-hover: #1a2441;
    --surface-sunken: #0e1529;
    --text-primary: #e8ecf7;
    --text-secondary: #a3adc8;
    --text-tertiary: #6e7899;
    --border: #212b46;
    --border-strong: #2d3a5c;
    --accent: #6b86ff;
    --accent-hover: #91a6ff;
    --accent-soft: rgba(107, 134, 255, .16);
    --accent-text: #aab9ff;
    --accent-2: #a78bfa;
    --accent-2-soft: rgba(167, 139, 250, .16);
    --on-accent: #ffffff;
    --input: #0e1529;
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, .35);
    --shadow: 0 1px 3px rgba(0, 0, 0, .4), 0 6px 16px -10px rgba(0, 0, 0, .55);
    --shadow-lg: 0 24px 48px -12px rgba(0, 0, 0, .7);
    --focus-ring: 0 0 0 3px rgba(107, 134, 255, .3);
    --success: #4ade80; --success-bg: #0f2a1f; --success-text: #7fe0ac;
    --warning: #fbbf24; --warning-bg: #2c220e; --warning-text: #f5c46b;
    --danger: #f87171;  --danger-bg: #331822;  --danger-text: #f7a8a8;
    --info: #7e98ff;    --info-bg: #18224a;    --info-text: #aab9ff;
    --chart-grid: #1e2742; --chart-text: #8b95b3;
    --tooltip-bg: #1d2850; --tooltip-border: rgba(255, 255, 255, .14); --tooltip-text: #ffffff;
    --highlight: linear-gradient(135deg, rgba(79, 124, 255, .16) 0%, rgba(155, 92, 246, .10) 55%, rgba(155, 92, 246, 0) 100%);

    --nav-bg: #0c1229;
    --nav-border: rgba(255, 255, 255, .06);
}

/* ---------- Alias : la sidebar et le header lisent les jetons de navigation ---------- */
:root, html body {
    --sidebar-background: var(--nav-bg);
    --sidebar-border: var(--nav-border);
    --sidebar-text: var(--nav-text);
    --sidebar-text-strong: var(--nav-text-strong);
    --sidebar-muted: var(--nav-muted);
    --sidebar-hover: var(--nav-hover);
    --sidebar-active: var(--nav-active);
    --sidebar-active-ring: inset 0 0 0 1px rgba(255, 255, 255, .06);
    --header-background: var(--nav-bg);
}

/* ---------- Alias historiques (ne pas redéfinir ailleurs) ---------- */
:root, html body, html body .alta-page {
    --ui-font: var(--font);
    --ui-fs-xs: var(--fs-xs); --ui-fs-sm: var(--fs-sm); --ui-fs: var(--fs); --ui-fs-md: var(--fs-md); --ui-fs-lg: var(--fs-lg); --ui-fs-xl: var(--fs-xl);
    --ui-radius-sm: var(--radius-sm); --ui-radius: var(--radius); --ui-radius-lg: var(--radius-lg);
    --ui-page-pad: var(--space); --ui-gap: var(--gap);
    --ui-ease: var(--ease); --ui-fast: var(--fast); --ui-med: var(--med);
    --ui-tap: var(--tap); --ui-ctl: var(--ctl);

    --ui-bg: var(--background);
    --ui-card: var(--surface);
    --ui-card-2: var(--surface-2);
    --ui-hover: var(--surface-hover);
    --ui-seg: var(--surface-sunken);
    --ui-input: var(--input);
    --ui-border: var(--border);
    --ui-border-strong: var(--border-strong);
    --ui-text: var(--text-primary);
    --ui-muted: var(--text-secondary);
    --ui-primary: var(--accent);
    --ui-solid: var(--accent);
    --ui-primary-hover: var(--accent-hover);
    --ui-primary-soft: var(--accent-soft);
    --ui-shadow-sm: var(--shadow-sm); --ui-shadow: var(--shadow); --ui-shadow-lg: var(--shadow-lg);
    --ui-success: var(--success); --ui-warning: var(--warning); --ui-danger: var(--danger); --ui-info: var(--info);
    --ui-ok-bg: var(--success-bg); --ui-ok-text: var(--success-text);
    --ui-warn-bg: var(--warning-bg); --ui-warn-text: var(--warning-text);
    --ui-err-bg: var(--danger-bg); --ui-err-text: var(--danger-text);
    --ui-info-bg: var(--info-bg); --ui-info-text: var(--info-text);
    --ui-chart-1: var(--accent); --ui-chart-2: var(--accent-soft); --ui-chart-grid: var(--chart-grid); --ui-chart-text: var(--chart-text);
    --ui-head-bg: var(--surface-2); --ui-head-text: var(--text-secondary); --ui-row-alt: transparent;

    --bg-main: var(--background); --card-bg: var(--surface); --border-soft: var(--border);
    --text-main: var(--text-primary); --text-muted: var(--text-secondary);
    --alta-bg: var(--background); --alta-card: var(--surface); --alta-border: var(--border);
    --alta-text-main: var(--text-primary); --alta-text-muted: var(--text-secondary); --alta-input-bg: var(--input);
    --alta-purple: var(--accent); --alta-purple-light: var(--accent-soft); --alta-purple-bg: var(--accent-soft);
    --alta-green: var(--success); --alta-green-light: var(--success-bg); --alta-green-bg: var(--success-bg);
    --alta-blue: var(--info); --alta-blue-light: var(--info-bg); --alta-blue-bg: var(--info-bg);
    --alta-orange: var(--warning); --alta-orange-light: var(--warning-bg); --alta-orange-bg: var(--warning-bg);
    --alta-red: var(--danger); --alta-red-light: var(--danger-bg); --alta-red-bg: var(--danger-bg);
}