/*
 * Design tokens.
 *
 * Two layers, the split Open Props uses: primitives that never mention the app (a size
 * scale, a radius scale, one hue per status), and semantic names that everything else
 * refers to (--surface-2, --text-2, --border). Only the semantic layer changes between
 * themes, so a component never has to know which theme is on.
 *
 * Colours are oklch() so a "subtle" or "emphasis" variant can be mixed from the same hue
 * instead of being a second hand-picked hex, and light-dark() pairs the two themes in one
 * declaration. That works because the theme is also a real color-scheme below, which gets
 * native form controls, scrollbars and the canvas colour for free. Neutrals write their hue
 * as `none`, so an oklch mix with a status colour keeps the status hue.
 */

:root {
    /* ── Primitives ─────────────────────────────────────────────────────── */

    /* Spacing, a rough 1.5x scale. --size-2 (0.5rem) is the default gap. */
    --size-1: 0.25rem;
    --size-2: 0.5rem;
    --size-3: 0.75rem;
    --size-4: 1rem;
    --size-5: 1.5rem;
    --size-6: 2rem;
    --size-7: 3rem;
    --size-8: 4rem;

    --radius-1: 0.25rem;
    --radius-2: 0.375rem;
    --radius-3: 0.5rem;
    --radius-round: 100vmax;

    --font-sans: system-ui, -apple-system, 'Segoe UI', roboto, 'Helvetica Neue', arial, sans-serif;
    --font-mono: ui-monospace, sfmono-regular, 'SF Mono', menlo, consolas, monospace;

    /* A small type scale: 12, 14, 16, 18, 22, 28px at a 16px root. */
    --font-size-00: 0.75rem;
    --font-size-0: 0.875rem;
    --font-size-1: 1rem;
    --font-size-2: 1.125rem;
    --font-size-3: 1.375rem;
    --font-size-4: 1.75rem;

    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;

    --line-height-tight: 1.25;
    --line-height-normal: 1.5;

    --shadow-1: 0 1px 2px light-dark(rgb(0 0 0 / 8%), rgb(0 0 0 / 40%));
    --shadow-2: 0 4px 12px light-dark(rgb(0 0 0 / 10%), rgb(0 0 0 / 50%)), 0 1px 3px light-dark(rgb(0 0 0 / 6%), rgb(0 0 0 / 35%));

    --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
    --duration-fast: 120ms;
    --duration-normal: 220ms;

    /* One hue per status, so every tint of it can be mixed rather than picked. */
    --hue-danger: 27;
    --hue-warning: 75;
    --hue-success: 150;
    --hue-info: 230;

    /* ── Semantic ───────────────────────────────────────────────────────── */

    /* Default: follow the operating system. [data-theme] pins it below. */
    color-scheme: light dark;

    /* Neutral surfaces, zero chroma: colour is kept for status and data. */
    --surface-1: light-dark(oklch(97.5% 0 none), oklch(15.5% 0 none)); /* page */
    --surface-2: light-dark(oklch(100% 0 none), oklch(20.5% 0 none)); /* cards, charts */
    --surface-3: light-dark(oklch(96% 0 none), oklch(24.5% 0 none)); /* card headers, bands, row hover */
    --surface-4: light-dark(oklch(92.5% 0 none), oklch(29.5% 0 none)); /* badges, pressed, current nav */
    --surface-sidebar: light-dark(oklch(96.5% 0 none), oklch(18% 0 none));
    --surface-inverse: light-dark(oklch(24% 0 none), oklch(93% 0 none)); /* tooltips */

    --text-1: light-dark(oklch(21% 0 none), oklch(95% 0 none));
    --text-2: light-dark(oklch(45% 0 none), oklch(75% 0 none));
    --text-3: light-dark(oklch(52% 0 none), oklch(63% 0 none)); /* placeholders, disabled only */
    --text-on-inverse: light-dark(oklch(98% 0 none), oklch(18% 0 none));

    --border: light-dark(oklch(89.5% 0 none), oklch(31% 0 none)); /* decorative dividers */
    --border-strong: light-dark(oklch(77% 0 none), oklch(44% 0 none)); /* card edges, chart axis */
    /* Boundary of every interactive control: at least 3:1 on surface-1..3 (WCAG 1.4.11). */
    --control-border: light-dark(oklch(62% 0 none), oklch(54% 0 none));
    --backdrop: light-dark(color-mix(in oklab, var(--text-1) 40%, transparent), color-mix(in oklab, var(--surface-1) 75%, transparent));

    /* The primary control colour: near black in light, near white in dark. */
    --accent: light-dark(oklch(23% 0 none), oklch(93% 0 none));
    --accent-hover: light-dark(oklch(32% 0 none), oklch(85% 0 none));
    --on-accent: light-dark(oklch(99% 0 none), oklch(16% 0 none));
    --accent-subtle: color-mix(in oklab, var(--accent) 7%, var(--surface-2));
    --on-danger: light-dark(oklch(99% 0 none), oklch(16% 0 none));

    --danger: light-dark(oklch(54% 0.2 var(--hue-danger)), oklch(68% 0.17 var(--hue-danger)));
    --warning: light-dark(oklch(68% 0.16 var(--hue-warning)), oklch(80% 0.15 var(--hue-warning)));
    --success: light-dark(oklch(52% 0.15 var(--hue-success)), oklch(72% 0.14 var(--hue-success)));
    --info: light-dark(oklch(55% 0.13 var(--hue-info)), oklch(72% 0.12 var(--hue-info)));

    /* Tints of the same hue: a filled badge background, and text that stays legible on it. */
    --danger-subtle: color-mix(in oklab, var(--danger) 16%, var(--surface-2));
    --warning-subtle: color-mix(in oklab, var(--warning) 22%, var(--surface-2));
    --success-subtle: color-mix(in oklab, var(--success) 16%, var(--surface-2));
    --info-subtle: color-mix(in oklab, var(--info) 16%, var(--surface-2));

    --danger-emphasis: light-dark(color-mix(in oklab, var(--danger) 80%, black), color-mix(in oklab, var(--danger) 75%, white));
    --warning-emphasis: light-dark(color-mix(in oklab, var(--warning) 70%, black), color-mix(in oklab, var(--warning) 80%, white));
    --success-emphasis: light-dark(color-mix(in oklab, var(--success) 80%, black), color-mix(in oklab, var(--success) 75%, white));
    --info-emphasis: light-dark(color-mix(in oklab, var(--info) 80%, black), color-mix(in oklab, var(--info) 75%, white));

    /* Focus: an outline (survives forced-colors mode), plus an optional halo. */
    --focus-color: var(--text-1);
    --focus-halo: 0 0 0 4px color-mix(in oklab, var(--text-1) 15%, transparent);

    /* Data series (2.3 of the redesign spec). Never used for UI chrome or status. */
    --series-1: light-dark(oklch(52% 0.14 265), oklch(58% 0.14 265)); /* indigo */
    --series-2: light-dark(oklch(56% 0.11 95), oklch(63% 0.11 95)); /* mustard */
    --series-3: light-dark(oklch(44% 0.15 345), oklch(54% 0.15 345)); /* plum */
    --series-4: light-dark(oklch(65% 0.11 185), oklch(66.5% 0.12 180)); /* teal */
    --series-5: light-dark(oklch(44% 0.11 55), oklch(52% 0.11 55)); /* brown */
    --series-6: light-dark(oklch(62% 0.11 285), oklch(66.5% 0.11 285)); /* lavender */
    --series-7: light-dark(oklch(47% 0.11 120), oklch(54% 0.11 120)); /* olive */
    --series-8: light-dark(oklch(56% 0.19 315), oklch(63% 0.19 315)); /* purple */
    --series-others: light-dark(oklch(62% 0 none), oklch(58% 0 none));

    /* Chart chrome, consumed through theme-colors.js. */
    --chart-text: var(--text-2);
    --chart-axis: var(--border-strong);
    --chart-grid: color-mix(in oklab, var(--border) 70%, transparent);
    --chart-tooltip-bg: var(--surface-2);
    --chart-tooltip-border: var(--border);
    --chart-brush: color-mix(in oklab, var(--text-1) 10%, transparent);
    --chart-brush-border: var(--text-2);

    /* Layers. */
    --layer-sticky: 10;
    --layer-sidebar: 20;
    --layer-menu: 30;
    --layer-toast: 50;
    --layer-tooltip: 60;

    /* Shell geometry. */
    --sidebar-size: 13.5rem;
    --sidebar-collapsed-size: 3.5rem;
    --tabbar-size: 3.75rem;

    /* Table density: <html data-density="compact"> tightens every table at once. */
    --cell-pad-block: var(--size-2);
    --cell-pad-inline: var(--size-3);
}

:root[data-density='compact'] {
    --cell-pad-block: var(--size-1);
    --cell-pad-inline: var(--size-2);
}

/*
 * An explicit choice pins color-scheme, which is what makes light-dark() resolve and what
 * tells the browser to render native widgets to match. The attribute is set by a blocking
 * script in <head> before first paint (#167).
 */
:root[data-theme='light'] {
    color-scheme: light;
}

:root[data-theme='dark'] {
    color-scheme: dark;
}

@media (prefers-reduced-motion: reduce) {
    :root {
        --duration-fast: 0ms;
        --duration-normal: 0ms;
    }
}