/* ==========================================================================
   DESIGN TOKENS — New Motion Labs brand (Brand Guidelines, Feb 2023)
   Light theme is the default. Dark theme applies when <html data-theme="dark">.
   The theme is set before first paint by theme.js and toggled from the header.
   Style every component through these tokens, never with literal colours.
   ========================================================================== */
:root {
    color-scheme: light;

    /* Brand palette (fixed across themes) */
    --nml-electric: #00E9FA;
    --nml-deep: #0E1530;
    --nml-green: #00F0A4;
    --nml-orange: #FF9C29;
    --nml-red: #FF245B;
    --nml-yellow: #FFEC00;

    /* Surfaces & ink */
    --bg-main: #F3F5F9;
    --surface: #FFFFFF;
    --surface-2: #F7F8FB;
    --surface-3: #ECEFF5;
    --ink: #0E1530;
    --ink-2: #4B5473;
    --ink-3: #7C849E;
    --line: #E2E6EF;
    --line-strong: #CDD3E0;

    /* Interactive */
    --accent: var(--nml-electric);
    --accent-ink: #0E1530;
    --accent-soft: #D6FBFE;
    --link: #0E1530;
    --link-line: #00C4D3;
    --focus: #00AFC0;

    /* Semantic: fills use brand colours; "-strong" shades are for text and icons */
    --ok: var(--nml-green);
    --ok-soft: #D9FDF1;
    --ok-strong: #00875F;
    --warn: var(--nml-orange);
    --warn-soft: #FFF0DD;
    --warn-strong: #A85800;
    --danger: var(--nml-red);
    --danger-soft: #FFE3EA;
    --danger-strong: #C0103D;

    --shadow-sm: 0 1px 2px rgba(14, 21, 48, 0.06);
    --shadow-md: 0 1px 2px rgba(14, 21, 48, 0.06), 0 8px 24px rgba(14, 21, 48, 0.07);

    /* Spacing and radius scale: use these instead of picking new pixel values,
       so panels, dialogs and menus keep the same rhythm across modules. */
    --space-1: 4px; --space-2: 6px; --space-3: 8px; --space-4: 10px;
    --space-5: 12px; --space-6: 16px; --space-7: 20px; --space-8: 24px;
    --radius-sm: 6px; --radius-md: 8px; --radius-lg: 12px;

    --font-sans: "Poppins", "Helvetica Neue", Helvetica, Arial, sans-serif;
    --font-mono: "DM Mono", "Courier New", Courier, monospace;

    --transition-fast: 0.15s cubic-bezier(0.4, 0, 0.2, 1);

    /* Legacy aliases still referenced by older markup */
    --text-primary: var(--ink);
    --text-secondary: var(--ink-2);
    --text-muted: var(--ink-3);
    --border-color: var(--line);
    --border-color-focus: var(--line-strong);

    /* Chart series, in fixed order (one per test on the elongation chart).
       The validated default categorical palette from the dataviz method. */
    --viz-1: #2a78d6; --viz-2: #eb6834; --viz-3: #1baf7a; --viz-4: #eda100;
    --viz-5: #e87ba4; --viz-6: #008300; --viz-7: #6250d6; --viz-8: #e34948;
}

:root[data-theme="dark"] {
    color-scheme: dark;
    --bg-main: #080D1F;
    --surface: #0E1530;
    --surface-2: #121B3B;
    --surface-3: #1B2548;
    --ink: #FFFFFF;
    --ink-2: #B3BBD4;
    --ink-3: #8189A6;
    --line: #222C52;
    --line-strong: #2E3A66;
    --accent-soft: rgba(0, 233, 250, 0.14);
    --link: #00E9FA;
    --link-line: rgba(0, 233, 250, 0.45);
    --focus: #00E9FA;
    --ok-soft: rgba(0, 240, 164, 0.14);
    --ok-strong: #00F0A4;
    --warn-soft: rgba(255, 156, 41, 0.16);
    --warn-strong: #FF9C29;
    --danger-soft: rgba(255, 36, 91, 0.16);
    --danger-strong: #FF5C83;
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 1px 2px rgba(0, 0, 0, 0.3), 0 8px 24px rgba(0, 0, 0, 0.3);

    /* Chart series, stepped for the dark surface */
    --viz-1: #3987e5; --viz-2: #d95926; --viz-3: #199e70; --viz-4: #c98500;
    --viz-5: #d55181; --viz-6: #008300; --viz-7: #9085e9; --viz-8: #e66767;
}