/**
 * RGEF Design System
 * Couleurs de marque conservées · versions diluées pour l’UI (effet smooth).
 */
:root {
    /* ——— Marque RGEF (référence — ne pas modifier) ——— */
    --rgef-brand-primary: #1e3a5f;
    --rgef-brand-accent: #0d9488;
    --rgef-brand-accent-hover: #0f766e;
    --rgef-brand-blue: #2563eb;
    --rgef-brand-teal: #14b8a6;
    --rgef-brand-orange: #f97316;
    --rgef-brand-text: #1e293b;
    --rgef-brand-text-muted: #64748b;
    --rgef-brand-border: #cbd5e1;
    --rgef-brand-bg: #f0f4f8;
    --rgef-brand-error: #dc2626;
    --rgef-brand-success: #16a34a;

    /* ——— Surfaces (teinte légère navy dans le fond) ——— */
    --rgef-base: var(--rgef-brand-bg);
    --rgef-base-alt: color-mix(in srgb, var(--rgef-brand-bg) 82%, var(--rgef-brand-primary));
    --rgef-layer: rgba(255, 255, 255, 0.78);
    --rgef-card: rgba(255, 255, 255, 0.9);
    --rgef-card-hover: rgba(255, 255, 255, 0.97);
    --rgef-nav-bg: var(--rgef-brand-primary);
    --rgef-nav-active: rgba(255, 255, 255, 0.12);
    --rgef-nav-text: rgba(255, 255, 255, 0.88);
    --rgef-nav-text-muted: rgba(255, 255, 255, 0.62);
    --rgef-header-bg: rgba(255, 255, 255, 0.85);

    /* ——— Texte ——— */
    --rgef-text: var(--rgef-brand-text);
    --rgef-text-secondary: color-mix(in srgb, var(--rgef-brand-text) 78%, var(--rgef-brand-primary));
    --rgef-text-muted: var(--rgef-brand-text-muted);
    --rgef-text-disabled: color-mix(in srgb, var(--rgef-brand-text-muted) 65%, white);

    /* ——— Accent UI — teal adouci (bouton connexion) ——— */
    --rgef-accent: #6ebeb6;
    --rgef-accent-hover: #5daea6;
    --rgef-accent-subtle: color-mix(in srgb, var(--rgef-accent) 18%, white);
    --rgef-accent-text: color-mix(in srgb, var(--rgef-accent) 75%, var(--rgef-brand-primary));

    /* ——— Primary navy — dilué (titres, badges) ——— */
    --rgef-primary: color-mix(in srgb, var(--rgef-brand-primary) 72%, white);
    --rgef-primary-strong: var(--rgef-brand-primary);

    /* ——— KPI & données — accent teal ——— */
    --rgef-data: var(--rgef-accent);
    --rgef-data-muted: color-mix(in srgb, var(--rgef-accent) 55%, white);

    /* ——— Graphiques — palette modèle (bleu · teal · orange) adoucie ——— */
    --rgef-chart-blue: color-mix(in srgb, var(--rgef-brand-blue) 48%, white);
    --rgef-chart-teal: var(--rgef-accent);
    --rgef-chart-orange: color-mix(in srgb, var(--rgef-brand-orange) 52%, white);
    --rgef-chart-1: var(--rgef-chart-blue);
    --rgef-chart-2: var(--rgef-chart-teal);
    --rgef-chart-3: var(--rgef-chart-orange);
    --rgef-chart-4: color-mix(in srgb, var(--rgef-brand-primary) 38%, white);
    --rgef-chart-grid: color-mix(in srgb, var(--rgef-brand-border) 55%, white);
    --rgef-chart-axis: var(--rgef-brand-text-muted);

    /* ——— États ——— */
    --rgef-error-bg: color-mix(in srgb, var(--rgef-brand-error) 8%, white);
    --rgef-error-text: color-mix(in srgb, var(--rgef-brand-error) 72%, #3d3d3d);
    --rgef-error-border: color-mix(in srgb, var(--rgef-brand-error) 22%, white);
    --rgef-success-bg: color-mix(in srgb, var(--rgef-brand-success) 8%, white);
    --rgef-success-text: color-mix(in srgb, var(--rgef-brand-success) 68%, #3d3d3d);

    /* ——— Bordures ——— */
    --rgef-border-color: color-mix(in srgb, var(--rgef-brand-border) 45%, transparent);
    --rgef-border-strong: color-mix(in srgb, var(--rgef-brand-border) 70%, transparent);
    --rgef-border: 1px solid var(--rgef-border-color);
    --rgef-border-strong-style: 1px solid var(--rgef-border-strong);

    /* ——— Géométrie Fluent ——— */
    --rgef-radius-sm: 4px;
    --rgef-radius: 8px;
    --rgef-radius-lg: 12px;

    /* ——— Espacement ——— */
    --rgef-space-1: 0.25rem;
    --rgef-space-2: 0.5rem;
    --rgef-space-3: 0.75rem;
    --rgef-space-4: 1rem;
    --rgef-space-5: 1.25rem;
    --rgef-space-6: 1.5rem;
    --rgef-space-8: 2rem;
    --rgef-space-10: 2.5rem;

    /* ——— Layout ——— */
    --rgef-sidebar-width: 248px;
    --rgef-content-max: 1320px;

    /* ——— Typographie ——— */
    --rgef-font: "Segoe UI Variable", "Segoe UI", system-ui, sans-serif;
    --rgef-font-size-caption: 0.75rem;
    --rgef-font-size-sm: 0.8125rem;
    --rgef-font-size: 0.875rem;
    --rgef-font-size-lg: 1.125rem;
    --rgef-font-size-xl: 1.25rem;
    --rgef-font-size-subtitle: 1.375rem;

    /* ——— Motion ——— */
    --rgef-ease: cubic-bezier(0.33, 0, 0.1, 1);
    --rgef-duration: 180ms;

    /* ——— Overlay ——— */
    --rgef-smoke: color-mix(in srgb, var(--rgef-brand-primary) 28%, transparent);
}