/* NIOL — design tokens (brand direction "Onda"). Hex values are taken verbatim from the NIOL Brand Sheet.
   Dark is the primary/default theme: the :root defaults ARE the dark palette. Light is an override.
   The D6 shell sets data-bs-theme for pre-render; the live toggle also sets data-theme. Both selectors are
   supported so the tokens resolve regardless of which attribute is present. One accent per composition:
   --niol-accent is mapped to the theme (lime on dark, lime-dark on light). */

:root {
    /* --- Dark (primary) palette --- */
    --niol-bg: #0C1017;            /* page background — antracite */
    --niol-panel: #141A22;         /* elevated surface */
    --niol-panel-2: #1B222C;       /* slightly higher surface (hover/inset) */
    --niol-border: #232B35;        /* panel border */
    --niol-text: #FFFFFF;          /* primary text */
    --niol-text-muted: #98A0AB;    /* secondary text */
    --niol-text-subtle: #66717F;   /* tertiary / captions */
    --niol-accent: #93D821;        /* signal lime */
    --niol-accent-hover: #A6E63E;
    --niol-on-accent: #0C1017;     /* text/icon on an accent fill (dark, for contrast on lime) */
    --niol-accent-soft: color-mix(in srgb, var(--niol-accent) 14%, transparent);

    /* --- Semantics (shared across themes) --- */
    --niol-ok: #93D821;
    --niol-warning: #F5A524;
    --niol-alarm: #F04438;
    --niol-ok-soft: color-mix(in srgb, var(--niol-ok) 15%, transparent);
    --niol-warning-soft: color-mix(in srgb, var(--niol-warning) 16%, transparent);
    --niol-alarm-soft: color-mix(in srgb, var(--niol-alarm) 15%, transparent);

    /* --- Elevation --- */
    --niol-shadow: 0 1px 2px rgba(0, 0, 0, 0.35), 0 8px 24px rgba(0, 0, 0, 0.28);
    --niol-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);

    /* --- Type --- */
    --niol-font-display: 'Space Grotesk', system-ui, sans-serif;
    --niol-font-body: 'IBM Plex Sans', system-ui, sans-serif;
    --niol-font-mono: 'IBM Plex Mono', ui-monospace, 'Cascadia Code', monospace;

    --niol-fs-h1: clamp(38px, 4vw, 56px);
    --niol-fs-h2: clamp(24px, 2.4vw, 28px);
    --niol-fs-lead: 18px;
    --niol-fs-body: 15px;
    --niol-fs-label: 11px;

    /* --- Spacing --- */
    --niol-space-1: 4px;
    --niol-space-2: 8px;
    --niol-space-3: 12px;
    --niol-space-4: 16px;
    --niol-space-5: 24px;
    --niol-space-6: 32px;
    --niol-space-7: 48px;

    /* --- Radius --- */
    --niol-radius: 14px;          /* panels / cards (brand sheet) */
    --niol-radius-sm: 8px;        /* inputs / small controls */
    --niol-radius-pill: 999px;

    /* --- Layout --- */
    --niol-header-h: 60px;

    color-scheme: dark;
}

/* Explicit dark override (default already dark; kept so an app that only sets data-theme="dark" is covered). */
:root[data-theme="dark"],
[data-bs-theme="dark"] {
    --niol-bg: #0C1017;
    --niol-panel: #141A22;
    --niol-panel-2: #1B222C;
    --niol-border: #232B35;
    --niol-text: #FFFFFF;
    --niol-text-muted: #98A0AB;
    --niol-text-subtle: #66717F;
    --niol-accent: #93D821;
    --niol-accent-hover: #A6E63E;
    --niol-on-accent: #0C1017;
    --niol-shadow: 0 1px 2px rgba(0, 0, 0, 0.35), 0 8px 24px rgba(0, 0, 0, 0.28);
    --niol-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
    color-scheme: dark;
}

/* Light override. */
:root[data-theme="light"],
[data-bs-theme="light"] {
    --niol-bg: #F4F6F8;
    --niol-panel: #FFFFFF;
    --niol-panel-2: #F4F6F8;
    --niol-border: #E7EAEE;
    --niol-text: #161B22;
    --niol-text-muted: #4C555F;
    --niol-text-subtle: #6B7480;
    --niol-accent: #6FA80F;         /* lime-dark on light */
    --niol-accent-hover: #5A8A0C;
    --niol-on-accent: #FFFFFF;      /* white on the darker lime reads better than antracite */
    --niol-shadow: 0 1px 2px rgba(16, 24, 40, 0.06), 0 10px 26px rgba(16, 24, 40, 0.08);
    --niol-shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.06);
    color-scheme: light;
}