/* Kroken — design tokens (DARK default, LIGHT via [data-theme="light"]) */
:root {
    /* Dark mode (default) */
    --bg-0: oklch(0.18 0.015 165);
    --bg-1: oklch(0.22 0.018 165);
    --bg-2: oklch(0.27 0.02 165);
    --bg-3: oklch(0.32 0.022 165);
    --line: oklch(0.34 0.02 165 / 0.5);
    --line-soft: oklch(0.34 0.02 165 / 0.25);

    --ink-0: oklch(0.97 0.008 85);
    --ink-1: oklch(0.82 0.01 85);
    --ink-2: oklch(0.62 0.012 85);
    --ink-3: oklch(0.48 0.012 85);

    --paper: oklch(0.97 0.008 85);
    --paper-ink: oklch(0.22 0.015 165);

    --accent: oklch(0.74 0.14 62);
    --accent-deep: oklch(0.58 0.16 50);
    --accent-soft: oklch(0.74 0.14 62 / 0.14);
    --accent-ink: oklch(0.18 0.02 60);

    --moss: oklch(0.62 0.09 145);

    --radius-xs: 4px;
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 18px;
    --radius-xl: 28px;

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.18), 0 1px 1px rgba(0, 0, 0, 0.1);
    --shadow-md: 0 8px 24px -8px rgba(0, 0, 0, 0.4), 0 2px 6px rgba(0, 0, 0, 0.18);
    --shadow-lg: 0 24px 60px -20px rgba(0, 0, 0, 0.55);

    --font-display: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
}

[data-theme="light"] {
    --bg-0: oklch(0.97 0.005 85);
    --bg-1: oklch(0.99 0.004 85);
    --bg-2: oklch(0.95 0.006 85);
    --bg-3: oklch(0.92 0.008 85);
    --line: oklch(0.82 0.008 85);
    --line-soft: oklch(0.88 0.006 85);

    --ink-0: oklch(0.22 0.015 165);
    --ink-1: oklch(0.36 0.015 165);
    --ink-2: oklch(0.52 0.012 165);
    --ink-3: oklch(0.66 0.012 165);

    --paper: oklch(0.99 0.004 85);
    --paper-ink: oklch(0.22 0.015 165);

    --accent: oklch(0.58 0.16 50);
    --accent-deep: oklch(0.5 0.17 45);
    --accent-soft: oklch(0.58 0.16 50 / 0.1);
    --accent-ink: oklch(0.99 0.004 85);

    --shadow-sm: 0 1px 2px rgba(20, 30, 25, 0.06);
    --shadow-md: 0 8px 24px -8px rgba(20, 30, 25, 0.16), 0 2px 4px rgba(20, 30, 25, 0.04);
    --shadow-lg: 0 24px 50px -16px rgba(20, 30, 25, 0.2);
}