/* ============================================
   Design tokens — Midnight Slate (dark mode)
   Source de verite : app/config/ui.py
   Convention sync : voir skill `frontend-themes`
   ============================================ */
:root {
    /* Surfaces */
    --color-bg-page: #0B1220;
    --color-bg-sidebar: #060A14;
    --color-bg-surface: #131C2E;
    --color-bg-surface-alt: #1B263D;
    --color-bg-surface-hover: #1B2740;
    --color-bg-elevated: #243150;

    /* Bordures */
    --color-border-light: #1E2940;
    --color-border: #2A3654;
    --color-border-strong: #3B4A6B;

    /* Texte */
    --color-text-primary: #F8FAFC;
    --color-text-secondary: #CBD5E1;
    --color-text-muted: #94A3B8;
    --color-text-light: #64748B;
    --color-text-disabled: #475569;

    /* Brand */
    --color-primary: #3B82F6;
    --color-primary-rgb: 59, 130, 246;       /* composantes RGB de --color-primary, pour rgba() */
    --color-primary-hover: #60A5FA;
    --color-primary-active: #2563EB;
    --color-primary-subtle: #1E2E52;
    --color-primary-soft: #93C5FD;  /* = Colors.PRIMARY_SOFT (config/ui.py) — liens "doux" */

    /* Header "Glow Accent" — voir .page-header dans style.css */
    --color-glow-bg: #15142A;                       /* = Colors.GLOW_BG */
    --color-glow-accent: #5B47FB;                   /* = Colors.GLOW_ACCENT */
    --color-glow-accent-rgb: 91, 71, 251;
    --color-glow-accent-soft: #8B7AFF;              /* = Colors.GLOW_ACCENT_SOFT */
    --color-glow-accent-soft-rgb: 139, 122, 255;
    /* Variantes alpha dérivées des tokens GLOW_* */
    --glow-halo-strong: rgba(var(--color-glow-accent-rgb), 0.30);
    --glow-halo-soft: rgba(var(--color-glow-accent-rgb), 0.25);
    --glow-accent-line: rgba(var(--color-glow-accent-soft-rgb), 0.40);
    --glow-text-shadow: rgba(var(--color-glow-accent-soft-rgb), 0.30);
    --glow-subtitle-text: rgba(255, 255, 255, 0.65);   /* Texte sous-titre */
    --color-focus-ring: rgba(var(--color-primary-rgb), 0.35);

    /* Overlays blanc translucide — interactions sur fond dark.
       3 niveaux semantiques (hairline / hover / active). Sync = Colors.OVERLAY_*. */
    --overlay-hairline: rgba(255, 255, 255, 0.04);  /* dividers ultra-subtils, separations same-bg */
    --overlay-hover:    rgba(255, 255, 255, 0.06);  /* hover items menu, borders subtiles */
    --overlay-active:   rgba(255, 255, 255, 0.08);  /* hover nav, active state, borders standard */

    /* Shadows — 4 niveaux d'elevation, alpha opaque pour visibilite dark mode.
       Sync = Shadows.* dans config/ui.py. */
    --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.3);     /* elements subtils */
    --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.35);    /* cards standard */
    --shadow-md: 0 4px 8px rgba(0, 0, 0, 0.4);     /* cards elevees, dropdowns */
    --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.5);    /* modals, popovers */

    /* Semantic */
    --color-success: #22C55E;
    --color-success-rgb: 34, 197, 94;
    --color-success-text: #4ADE80;
    --color-success-subtle: #14291E;
    --color-danger: #EF4444;
    --color-danger-text: #F87171;
    --color-danger-subtle: #2A1515;
    --color-warning: #EAB308;
    --color-warning-text: #FDE047;
    --color-warning-subtle: #2A2106;
    --color-info: #06B6D4;
    --color-info-text: #22D3EE;
    --color-info-subtle: #052A33;

    /* Dataviz */
    --color-viz-1: #F97316;
    --color-viz-1-rgb: 249, 115, 22;
    --color-viz-2: #A855F7;
    --color-viz-2-rgb: 168, 85, 247;
    --color-viz-3: #EAB308;
    --color-viz-4: #10B981;
    --color-viz-5: #EC4899;
    --color-viz-6: #06B6D4;
}

/* ============================================
   Dash 4 — Theming variables (mapping interne Dash → tokens projet)
   ============================================ */
:root {
    --Dash-Fill-Inverse-Strong: #fff;
    --Dash-Fill-Interactive-Strong: var(--color-primary);
    --Dash-Fill-Interactive-Weak: rgba(0, 0, 0, 0.03);
    --Dash-Fill-Primary-Hover: rgba(0, 0, 0, 0.04);
    --Dash-Fill-Primary-Active: rgba(0, 0, 0, 0.08);
    --Dash-Fill-Disabled: rgba(0, 0, 0, 0.06);
    --Dash-Stroke-Strong: var(--color-border);
    --Dash-Stroke-Weak: var(--color-border-light);
    --Dash-Text-Primary: var(--color-text-primary);
    --Dash-Text-Strong: var(--color-text-primary);
    --Dash-Text-Weak: var(--color-text-muted);
    --Dash-Text-Disabled: var(--color-text-light);
}