/* ColibriDB design tokens — dark first, monochrome surfaces, one restrained accent. */
:root {
    --font-sans: "Inter", "Inter Variable", -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
    --font-mono: "Geist Mono", ui-monospace, "SF Mono", "JetBrains Mono", "Cascadia Code", Menlo, Consolas, monospace;

    --text-2xs: 10.5px;
    --text-xs: 11.5px;
    --text-sm: 12.5px;
    --text-base: 13.5px;
    --text-md: 15px;
    --text-lg: 18px;
    --text-xl: 22px;
    --text-2xl: 26px;

    --radius-xs: 4px;
    --radius-sm: 6px;
    --radius-md: 8px;
    --radius-lg: 10px;
    --radius-xl: 14px;
    --radius-pill: 999px;

    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    --space-8: 32px;

    --sidebar-w: 232px;
    --topbar-h: 48px;

    --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
    --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
    --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);
}


:root,
:root[data-theme="dark"] {
    color-scheme: dark;
    --brand-ruby: #FF5A78;
    --bg: #0a0a0a;
    --bg-sidebar: #0a0a0a;
    --surface: #111111;
    --surface-2: #171717;
    --surface-3: #1f1f1f;
    --surface-hover: #161616;
    --overlay: rgba(0, 0, 0, 0.62);

    --border: #262626;
    --border-subtle: #1c1c1c;
    --border-strong: #363636;

    --text: #ededed;
    --text-muted: #a1a1a1;
    --text-subtle: #8c8c8c;
    --text-faint: #6e6e6e;

    --accent: #7c8cff;
    --accent-strong: #95a2ff;
    --accent-soft: rgba(124, 140, 255, 0.12);
    --accent-line: rgba(124, 140, 255, 0.9);

    --success: #3ecf8e;
    --success-soft: rgba(62, 207, 142, 0.12);
    --warning: #f1a10d;
    --warning-soft: rgba(241, 161, 13, 0.12);
    --danger: #ff5c5c;
    --danger-soft: rgba(255, 92, 92, 0.12);

    --btn-primary-bg: #ededed;
    --btn-primary-fg: #0a0a0a;
    --btn-primary-hover: #ffffff;

    --chart-grid: #1f1f1f;
    --chart-1: #7c8cff;
    --chart-2: #3ecf8e;
    --chart-3: #f1a10d;
    --chart-4: #e879f9;
    --chart-5: #38bdf8;

    --shadow-pop: 0 0 0 1px var(--border), 0 16px 40px -12px rgba(0, 0, 0, 0.7);
    --shadow-modal: 0 0 0 1px var(--border-strong), 0 24px 64px -16px rgba(0, 0, 0, 0.8);
    --focus-ring: 0 0 0 1px var(--bg), 0 0 0 3px rgba(124, 140, 255, 0.55);
}

:root[data-theme="light"] {
    color-scheme: light;
    --brand-ruby: #B0213B;
    --bg: #ffffff;
    --bg-sidebar: #fafafa;
    --surface: #ffffff;
    --surface-2: #f5f5f5;
    --surface-3: #ededed;
    --surface-hover: #fafafa;
    --overlay: rgba(10, 10, 10, 0.32);

    --border: #e8e8e8;
    --border-subtle: #f0f0f0;
    --border-strong: #d4d4d4;

    --text: #0a0a0a;
    --text-muted: #525252;
    --text-subtle: #6b6b6b;
    --text-faint: #8a8a8a;

    --accent: #4f5ff5;
    --accent-strong: #3a49e0;
    --accent-soft: rgba(79, 95, 245, 0.08);
    --accent-line: rgba(79, 95, 245, 0.9);

    --success: #0f9d63;
    --success-soft: rgba(15, 157, 99, 0.09);
    --warning: #b76e00;
    --warning-soft: rgba(183, 110, 0, 0.09);
    --danger: #dc2626;
    --danger-soft: rgba(220, 38, 38, 0.08);

    --btn-primary-bg: #0a0a0a;
    --btn-primary-fg: #ffffff;
    --btn-primary-hover: #262626;

    --chart-grid: #f0f0f0;
    --chart-1: #4f5ff5;
    --chart-2: #0f9d63;
    --chart-3: #c27c0e;
    --chart-4: #c026d3;
    --chart-5: #0284c7;

    --shadow-pop: 0 0 0 1px var(--border), 0 12px 32px -12px rgba(0, 0, 0, 0.16);
    --shadow-modal: 0 0 0 1px var(--border), 0 24px 64px -20px rgba(0, 0, 0, 0.25);
    --focus-ring: 0 0 0 1px var(--bg), 0 0 0 3px rgba(79, 95, 245, 0.4);
}