/* ══════════════════════════════════════════════════════════════════════════
   FerroxX Flow — design tokens (fase 1: foundation)
   Eén donker, industrieel SaaS-thema: diep antraciet/blauwzwart met een teal
   accent. Light blijft in de code (theme.js, PreferredTheme) voor later,
   maar wordt nergens meer aangeboden - vandaar dat de tokens hier bewust
   alleen onder [data-bs-theme=dark] staan, niet op :root/[data-bs-theme=light].
   Accentkleur (--fx-accent) volgt de teal uit Weergave-instellingen
   (App.razor zet --bs-primary op basis daarvan vóór dit bestand geladen
   wordt is niet relevant - fx-tokens leest 'm hieronder terug uit --bs-primary
   zodat een aangepaste accentkleur automatisch de hele fx-laag meekleurt).
   ══════════════════════════════════════════════════════════════════════════ */

[data-bs-theme="dark"] {
    /* ── Vlakken ── */
    --fx-bg: #101a1c;
    --fx-bg-elevated: #162326;
    --fx-surface: #1b2b2f;
    --fx-surface-2: #22353a;
    --fx-surface-hover: #294249;
    --fx-border: rgba(69, 99, 106, 0.14);
    --fx-border-strong: rgba(69, 99, 106, 0.26);

    /* ── Accent (volgt --bs-primary uit Weergave-instellingen) ── */
    --fx-accent: var(--bs-primary, #14b8a6);
    --fx-accent-rgb: var(--bs-primary-rgb, 20, 184, 166);
    --fx-accent-glow: rgba(var(--fx-accent-rgb), 0.35);
    --fx-accent-glow-soft: rgba(var(--fx-accent-rgb), 0.16);

    /* ── Statuskleuren (kaders om al bestaande Bootstrap-rollen; blijven ook instelbaar) ── */
    --fx-ok: var(--bs-success, #22c55e);
    --fx-ok-rgb: var(--bs-success-rgb, 34, 197, 94);
    --fx-warn: var(--bs-warning, #f59e0b);
    --fx-warn-rgb: var(--bs-warning-rgb, 245, 158, 11);
    --fx-bad: var(--bs-danger, #ef4444);
    --fx-bad-rgb: var(--bs-danger-rgb, 239, 68, 68);
    --fx-info: var(--bs-info, #22d3ee);
    --fx-info-rgb: var(--bs-info-rgb, 34, 211, 238);

    /* Leesbare tekst op een halfdoorzichtige (badges/alerts) resp. gevulde (routing-stip,
       gantt-balk) achtergrond van dezelfde rol - App.razor overschrijft deze met een van de
       gekozen rolkleur afgeleide tint; de waarden hier zijn de originele, hardcoded tinten als
       fallback zolang die override nog niet geladen is. */
    --fx-ok-emphasis: #6ee7a8;
    --fx-warn-emphasis: #fbbf24;
    --fx-bad-emphasis: #fb7185;
    --fx-info-emphasis: #67e8f9;
    --fx-ok-contrast: #06281a;
    --fx-accent-contrast: #06211d;

    /* ── Tekst ── */
    --fx-text: #f2f6f7;
    --fx-text-muted: #a9b8bc;
    --fx-text-faint: #71868b;

    /* ── Vorm ── */
    --fx-radius-sm: .5rem;
    --fx-radius: .75rem;
    --fx-radius-lg: 1rem;
    --fx-radius-pill: 999px;

    /* ── Schaduw & glow ── */
    --fx-shadow-1: 0 1px 2px rgba(0, 0, 0, .4), 0 1px 3px rgba(0, 0, 0, .3);
    --fx-shadow-2: 0 8px 24px rgba(0, 0, 0, .45), 0 2px 8px rgba(0, 0, 0, .35);
    --fx-glow-accent: 0 0 0 1px rgba(var(--fx-accent-rgb), .25), 0 0 24px -4px rgba(var(--fx-accent-rgb), .45);
    --fx-glow-ok: 0 0 16px -4px rgba(var(--fx-ok-rgb), .5);
    --fx-glow-warn: 0 0 16px -4px rgba(var(--fx-warn-rgb), .5);
    --fx-glow-bad: 0 0 16px -4px rgba(var(--fx-bad-rgb), .5);

    /* ── Spacing-schaal (voor nieuwe Fx-componenten; bestaande Bootstrap-spacing blijft gewoon werken) ── */
    --fx-space-1: .25rem;
    --fx-space-2: .5rem;
    --fx-space-3: .75rem;
    --fx-space-4: 1rem;
    --fx-space-5: 1.5rem;
    --fx-space-6: 2rem;

    /* ── Beweging (uit staat via [data-fx-anim="off"] hieronder) ── */
    --fx-transition-fast: .12s ease;
    --fx-transition: .18s cubic-bezier(.4, 0, .2, 1);

    /* ── Dichtheid (Comfortable = standaard; Compact verkleint via data-fx-density) ── */
    --fx-card-pad-y: 1rem;
    --fx-card-pad-x: 1.1rem;
    --fx-cell-pad-y: .55rem;
    --fx-cell-pad-x: .75rem;

    color-scheme: dark;
}

[data-bs-theme="dark"][data-fx-density="compact"] {
    --fx-card-pad-y: .65rem;
    --fx-card-pad-x: .85rem;
    --fx-cell-pad-y: .35rem;
    --fx-cell-pad-x: .55rem;
}

/* Animaties centraal uit te zetten (Weergave-instellingen > Animaties & effecten).
   !important is hier bewust: dit moet elke los toegevoegde transition/animation overrulen,
   ook die van losse pagina's, zonder dat we elke plek moeten opsporen. */
[data-fx-anim="off"] *,
[data-fx-anim="off"] *::before,
[data-fx-anim="off"] *::after {
    transition-duration: 0s !important;
    animation-duration: 0s !important;
    animation-delay: 0s !important;
    scroll-behavior: auto !important;
}

/* Glow-effecten centraal uit te zetten: platte, rustigere weergave voor wie dat liever heeft
   (bijv. een tablet op de werkvloer in fel licht, waar een gloed toch niet opvalt). */
[data-fx-glow="off"] {
    --fx-glow-accent: 0 0 0 1px var(--fx-border-strong);
    --fx-glow-ok: none;
    --fx-glow-warn: none;
    --fx-glow-bad: none;
    --fx-accent-glow: transparent;
    --fx-accent-glow-soft: transparent;
}