/* VectorAtlas design tokens (Phase 21a). A port of Zentivue's tokens.css (cgs-dev, ContentGenerationSystem/app/Cgs.App/wwwroot/css/
   tokens.css) with the same names under --va-, and VectorAtlas's brand. Every colour, size and space in va.css comes from here.
   Light theme by default; dark follows the OS unless the user picks one (html[data-theme]).

   Brand (James, 2026-10-24, from the updated VectorAtlas logo): Primary Blue #0090F8 and Primary Gold #FFB000. Contrast rules
   (Phase 21 criterion 16a, WCAG 2.2 AA; checked by api.Tests/DesignTokenContrastTests.cs):
     --va-color-brand  #0090F8 is 3.3:1 on white: marks only (icons, borders, large display) on bg/surface, never body text or button labels.
     --va-color-focus  #0088EA in light mode: a shade darker than the brand blue so the ring is 3:1 on surface-2 too.
     --va-color-brand-action #006BB8 is 5.5:1 with white: text, links and filled buttons in light mode.
     --va-color-accent #FFB000 is 1.8:1 on white: accents only, with navy text on it (8.6:1); never text on white.

   Breakpoints (CSS variables can't be used inside @media, so these are the values va.css uses):
     phone   < 768px   (built for 360px first)
     tablet  768px–1279px
     desktop ≥ 1280px                                                                            */

:root {
    color-scheme: light;

    --va-color-brand: #0090f8;
    --va-color-brand-strong: #006bb8;
    --va-color-brand-soft: #e6f4fe;
    --va-color-brand-action: #006bb8;
    --va-color-brand-action-hover: #005494;
    --va-color-on-brand: #ffffff;

    --va-color-accent: #ffb000;
    --va-color-accent-hover: #e09a00;
    --va-color-on-accent: #10233d;
    --va-color-ink: #10233d;

    --va-color-bg: #f4f6f8;
    --va-color-surface: #ffffff;
    --va-color-sidebar: #ffffff;
    --va-color-surface-2: #eef1f4;
    --va-color-border: #e2e6ea;
    /* 3:1 on every light surface, surface-2 included: an input's edge has to be visible (WCAG 1.4.11), so this is darker than Zentivue's #c9d0d7. */
    --va-color-border-strong: #7d8899;
    --va-color-text: #10233d;
    --va-color-text-muted: #556070;
    --va-color-focus: #0088ea;

    --va-color-success: #067647;
    --va-color-success-soft: #e7f6ee;
    --va-color-warning: #9a5b00;
    --va-color-warning-soft: #fff4e0;
    --va-color-danger: #b42318;
    --va-color-danger-soft: #fdecea;

    --va-color-scrim: rgb(16 35 61 / 45%);

    /* Type: system fonts (no web-font download), fluid between 360px and 1280px */
    --va-font-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --va-font-mono: ui-monospace, "Cascadia Code", "SF Mono", Menlo, Consolas, monospace;
    --va-text-xs: 0.75rem;
    --va-text-sm: 0.875rem;
    --va-text-md: clamp(0.9375rem, 0.91rem + 0.12vw, 1rem);
    --va-text-lg: clamp(1.0625rem, 1.02rem + 0.2vw, 1.1875rem);
    --va-text-xl: clamp(1.375rem, 1.25rem + 0.55vw, 1.75rem);
    --va-text-2xl: clamp(1.625rem, 1.45rem + 0.8vw, 2.125rem);
    --va-leading: 1.55;
    --va-weight-medium: 550;
    --va-weight-bold: 650;

    /* Space: fluid gutters, fixed small steps */
    --va-space-1: 0.25rem;
    --va-space-2: 0.5rem;
    --va-space-3: 0.75rem;
    --va-space-4: 1rem;
    --va-space-5: 1.5rem;
    --va-space-6: 2rem;
    --va-gutter: clamp(1rem, 0.6rem + 1.8vw, 2rem);

    /* Shape and depth */
    --va-radius-sm: 6px;
    --va-radius-md: 10px;
    --va-radius-lg: 14px;
    --va-shadow-sm: 0 1px 2px rgb(16 24 40 / 6%);
    --va-shadow-md: 0 4px 16px rgb(16 24 40 / 10%);
    --va-shadow-lg: 0 16px 48px rgb(16 24 40 / 18%);

    /* Layout */
    --va-tap: 44px;              /* minimum tap target */
    --va-sidebar-width: 256px;
    --va-topbar-height: 56px;
    --va-content-max: 1200px;
    --va-motion: 160ms ease;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        color-scheme: dark;
        --va-color-brand: #0090f8;
        --va-color-brand-strong: #80c6ff;
        --va-color-brand-soft: #0f2a45;
        --va-color-brand-action: #4db1ff;
        --va-color-brand-action-hover: #80c6ff;
        --va-color-on-brand: #0a1626;
        --va-color-accent: #ffb000;
        --va-color-accent-hover: #ffc23d;
        --va-color-on-accent: #10233d;
        --va-color-bg: #0d1726;
        --va-color-surface: #142238;
        --va-color-sidebar: #0a1220;
        --va-color-surface-2: #1b2c46;
        --va-color-border: #26385a;
        --va-color-border-strong: #627ca3;
        --va-color-text: #e6edf3;
        --va-color-text-muted: #a6b3c4;
        --va-color-focus: #4db1ff;
        --va-color-success: #4ade80;
        --va-color-success-soft: #13301f;
        --va-color-warning: #fbbf24;
        --va-color-warning-soft: #33280f;
        --va-color-danger: #f87171;
        --va-color-danger-soft: #3a1717;
        --va-color-scrim: rgb(0 0 0 / 60%);
        --va-shadow-md: 0 4px 16px rgb(0 0 0 / 40%);
        --va-shadow-lg: 0 16px 48px rgb(0 0 0 / 55%);
    }
}

:root[data-theme="dark"] {
    color-scheme: dark;
    --va-color-brand: #0090f8;
    --va-color-brand-strong: #80c6ff;
    --va-color-brand-soft: #0f2a45;
    --va-color-brand-action: #4db1ff;
    --va-color-brand-action-hover: #80c6ff;
    --va-color-on-brand: #0a1626;
    --va-color-accent: #ffb000;
    --va-color-accent-hover: #ffc23d;
    --va-color-on-accent: #10233d;
    --va-color-bg: #0d1726;
    --va-color-surface: #142238;
    --va-color-sidebar: #0a1220;
    --va-color-surface-2: #1b2c46;
    --va-color-border: #26385a;
    --va-color-border-strong: #627ca3;
    --va-color-text: #e6edf3;
    --va-color-text-muted: #a6b3c4;
    --va-color-focus: #4db1ff;
    --va-color-success: #4ade80;
    --va-color-success-soft: #13301f;
    --va-color-warning: #fbbf24;
    --va-color-warning-soft: #33280f;
    --va-color-danger: #f87171;
    --va-color-danger-soft: #3a1717;
    --va-color-scrim: rgb(0 0 0 / 60%);
    --va-shadow-md: 0 4px 16px rgb(0 0 0 / 40%);
    --va-shadow-lg: 0 16px 48px rgb(0 0 0 / 55%);
}