/* Kolmadia design tokens — single source of truth for color, spacing, and
   radii. The app grew three parallel naming conventions for the same
   concepts (--km2-*, the legacy --km-*, and design-system's --ui-*). Rather
   than rewrite every consumer at once, this file makes --km-* and --ui-*
   pure aliases of the canonical --km2-* palette, in both themes, so every
   naming convention now always resolves to the exact same value. This also
   fixes a real bug: --ui-* previously had no dark-mode variant at all, so
   anything styled with var(--ui-surface)/var(--ui-text)/etc stayed frozen in
   light colors when the workspace switched to dark mode. */

:root,
html[data-theme="light"] {
    color-scheme: light;

    /* Canonical palette */
    --km2-canvas: #f3f6f5;
    --km2-surface: #ffffff;
    --km2-surface-2: #f7f9f8;
    --km2-surface-3: #edf3f1;
    --km2-sidebar: #101827;
    --km2-sidebar-2: #151f30;
    --km2-text: #16231e;
    --km2-muted: #687871;
    --km2-border: #d9e3df;
    --km2-border-strong: #c9d6d1;
    --km2-accent: #147d64;
    --km2-accent-hover: #0f6c56;
    --km2-accent-soft: #e2f2ec;
    --km2-blue: #2679ed;
    --km2-blue-soft: #e7f0ff;
    --km2-warning: #d99118;
    --km2-success: #147d64;
    --km2-danger: #c34d48;
    --km2-shadow: 0 8px 26px rgba(18, 41, 32, .06);
    --km2-shadow-menu: 0 20px 58px rgba(5, 16, 13, .2);
    --km2-shadow-hover: 0 6px 16px rgba(18, 41, 32, .1);

    /* Legacy "km" names, aliased so every page written against them stays in
       perfect sync with the canonical palette instead of drifting from it. */
    --km-ink: var(--km2-text);
    --km-muted: var(--km2-muted);
    --km-canvas: var(--km2-canvas);
    --km-surface: var(--km2-surface);
    --km-line: var(--km2-border);
    --km-green: var(--km2-accent);
    --km-green-dark: var(--km2-accent-hover);
    --km-green-soft: var(--km2-accent-soft);
    --km-amber: var(--km2-warning);
    --km-red: var(--km2-danger);
    --km-shadow: var(--km2-shadow);
    --km-radius: 14px;
    --km-text: var(--km-ink);
    --km-border: var(--km-line);
    --km-border-strong: var(--km-line);
    --km-accent: var(--km-green);
    --km-surface-soft: var(--km-canvas);
    --km-active: var(--km2-surface-3);
    --km-panel: var(--km2-surface);
    --km-input: var(--km2-surface-2);
    --km-input-bg: var(--km2-surface-2);
    --km-soft: var(--km2-surface-2);

    /* design-system's "ui" names, aliased the same way so they finally theme
       correctly in dark mode instead of staying frozen light. */
    --ui-border: var(--km2-border);
    --ui-surface: var(--km2-surface);
    --ui-surface-soft: var(--km2-surface-2);
    --ui-soft: var(--km2-surface-2);
    --ui-text: var(--km2-text);
    --ui-muted: var(--km2-muted);
    --ui-green: var(--km2-accent);
    --ui-shadow: var(--km2-shadow);
    --km2-accent-strong: var(--km2-accent-hover);

    /* Spacing / radius scale (same in both themes) */
    --ui-space-1: 6px;
    --ui-space-2: 10px;
    --ui-space-3: 16px;
    --ui-space-4: 24px;
    --ui-space-5: 32px;
    --ui-radius: 10px;
    --ui-radius-lg: 13px;

    /* Layout / control dimensions (same in both themes) */
    --km-layout-width: 1540px;
    --km-page-gap: clamp(24px, 2.4vw, 34px);
    --km-panel-pad: clamp(22px, 2.2vw, 30px);
    --km-control-height: 44px;
    --km-radius-panel: 14px;
    --km-radius-control: 9px;
}

html[data-theme="dark"] {
    color-scheme: dark;

    --km2-canvas: #0e1219;
    --km2-surface: #171c25;
    --km2-surface-2: #1c222d;
    --km2-surface-3: #222a35;
    --km2-sidebar: #090e16;
    --km2-sidebar-2: #101722;
    --km2-text: #edf3f0;
    --km2-muted: #9aa9a3;
    --km2-border: #2b3541;
    --km2-border-strong: #394553;
    --km2-accent: #35c795;
    --km2-accent-hover: #53d6a9;
    --km2-accent-soft: #173c33;
    --km2-blue: #5a98ff;
    --km2-blue-soft: #182c4d;
    --km2-warning: #f0ad3c;
    --km2-success: #35c795;
    --km2-danger: #ef7772;
    --km2-shadow: 0 10px 30px rgba(0, 0, 0, .22);
    --km2-shadow-menu: 0 22px 64px rgba(0, 0, 0, .48);
    --km2-shadow-hover: 0 6px 18px rgba(0, 0, 0, .35);

    --km-ink: var(--km2-text);
    --km-muted: var(--km2-muted);
    --km-canvas: var(--km2-canvas);
    --km-surface: var(--km2-surface);
    --km-line: var(--km2-border);
    --km-green: var(--km2-accent);
    --km-green-dark: var(--km2-accent-hover);
    --km-green-soft: var(--km2-accent-soft);
    --km-amber: var(--km2-warning);
    --km-red: var(--km2-danger);
    --km-shadow: var(--km2-shadow);
    --km-text: var(--km-ink);
    --km-border: var(--km-line);
    --km-border-strong: var(--km-line);
    --km-accent: var(--km-green);
    --km-surface-soft: var(--km-canvas);
    --km-active: var(--km2-surface-3);
    --km-panel: var(--km2-surface);
    --km-input: var(--km2-surface-2);
    --km-input-bg: var(--km2-surface-2);
    --km-soft: var(--km2-surface-2);

    --ui-border: var(--km2-border);
    --ui-surface: var(--km2-surface);
    --ui-surface-soft: var(--km2-surface-2);
    --ui-soft: var(--km2-surface-2);
    --ui-text: var(--km2-text);
    --ui-muted: var(--km2-muted);
    --ui-green: var(--km2-accent);
    --ui-shadow: var(--km2-shadow);
    --km2-accent-strong: var(--km2-accent-hover);
}