/* Design tokens -----------------------------------------------------------
   The one place colour, type, size, radius, and depth are decided. Every
   stylesheet reads these; nothing else should introduce a raw colour.

   Light values sit on :root. Dark values override them on
   body[data-theme="dark"]. The legacy names further down (--page, --link, ...)
   are declared on body rather than :root on purpose: a custom property that
   references another resolves where it is declared, so mapping them on :root
   would freeze them at the light values before the dark theme could apply. */

:root {
    /* Type */
    --font-sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --font-mono: ui-monospace, "SFMono-Regular", "Cascadia Code", Menlo, Consolas, monospace;

    --text-2xs: 11px;
    --text-xs: 12px;
    --text-sm: 13px;
    --text-base: 14px;
    --text-md: 15px;
    --text-lg: 16px;
    --text-xl: 18px;
    --text-2xl: 20px;
    --text-3xl: 24px;
    --text-4xl: 30px;

    --weight-regular: 400;
    --weight-medium: 500;
    --weight-semibold: 600;
    --weight-bold: 700;

    --leading-tight: 1.25;
    --leading-snug: 1.4;
    --leading-normal: 1.5;
    --leading-relaxed: 1.65;

    --tracking-tight: -0.02em;
    --tracking-snug: -0.01em;
    --tracking-wide: 0.06em;

    /* Space (4px grid) */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    --space-8: 32px;
    --space-10: 40px;
    --space-12: 48px;

    /* Shape */
    --radius-xs: 4px;
    --radius-sm: 6px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 16px;
    --radius-full: 999px;

    /* Controls */
    --control-height-sm: 32px;
    --control-height: 38px;
    --control-height-lg: 44px;

    /* Layout */
    --layout-sidebar: 256px;
    --layout-topbar: 64px;
    --layout-tabs: 48px;
    --layout-statusbar: 32px;
    --layout-content-max: 1600px;

    /* Motion */
    --ease-out: cubic-bezier(.16, 1, .3, 1);
    --duration-fast: 120ms;
    --duration: 180ms;

    /* Neutral surfaces */
    --color-bg: #f6f7f9;
    --color-surface: #ffffff;
    --color-surface-muted: #f9fafb;
    --color-surface-sunken: #f2f4f7;
    --color-overlay: rgb(15 23 42 / 45%);

    --color-border: #e6e8ec;
    --color-border-strong: #d0d5dd;

    --color-text: #101828;
    --color-text-secondary: #344054;
    --color-text-muted: #667085;
    --color-text-faint: #98a2b3;
    --color-icon: #98a2b3;

    /* Brand */
    --color-primary: #2563eb;
    --color-primary-hover: #1d4ed8;
    --color-primary-active: #1e40af;
    --color-primary-soft: #eff4ff;
    --color-primary-soft-strong: #dbe6fe;
    --color-primary-border: #b2ccff;
    --color-on-primary: #ffffff;
    --color-focus-ring: rgb(37 99 235 / 28%);

    /* Status: text, background, border */
    --color-success: #16a34a;
    --color-success-text: #067647;
    --color-success-bg: #ecfdf3;
    --color-success-border: #abefc6;

    --color-warning: #d97706;
    --color-warning-text: #b54708;
    --color-warning-bg: #fffaeb;
    --color-warning-border: #fedf89;

    --color-danger: #dc2626;
    --color-danger-hover: #b91c1c;
    --color-danger-text: #b42318;
    --color-danger-bg: #fef3f2;
    --color-danger-border: #fecdca;

    --color-info-text: #175cd3;
    --color-info-bg: #eff8ff;
    --color-info-border: #b2ddff;

    --color-neutral-text: #475467;
    --color-neutral-bg: #f2f4f7;
    --color-neutral-border: #e4e7ec;

    /* Charts: distinct in both themes, blue first to match the brand */
    --color-chart-1: #2563eb;
    --color-chart-2: #10b981;
    --color-chart-3: #f59e0b;
    --color-chart-4: #8b5cf6;
    --color-chart-5: #06b6d4;
    --color-chart-6: #f43f5e;

    /* Depth */
    --shadow-xs: 0 1px 2px rgb(16 24 40 / 5%);
    --shadow-sm: 0 1px 3px rgb(16 24 40 / 8%), 0 1px 2px rgb(16 24 40 / 4%);
    --shadow-md: 0 4px 10px -2px rgb(16 24 40 / 8%), 0 2px 4px -2px rgb(16 24 40 / 4%);
    --shadow-lg: 0 14px 32px -8px rgb(16 24 40 / 16%), 0 4px 8px -4px rgb(16 24 40 / 6%);
    --shadow-xl: 0 24px 64px -12px rgb(16 24 40 / 24%);

    color-scheme: light;
}

body[data-theme="dark"] {
    --color-bg: #0b1120;
    --color-surface: #111827;
    --color-surface-muted: #151e2e;
    --color-surface-sunken: #1a2436;
    --color-overlay: rgb(2 6 23 / 65%);

    --color-border: #1f2a3c;
    --color-border-strong: #2e3b52;

    --color-text: #f2f4f7;
    --color-text-secondary: #d0d5dd;
    --color-text-muted: #98a2b3;
    --color-text-faint: #667085;
    --color-icon: #7d8799;

    --color-primary: #3b82f6;
    --color-primary-hover: #60a5fa;
    --color-primary-active: #2563eb;
    --color-primary-soft: rgb(59 130 246 / 14%);
    --color-primary-soft-strong: rgb(59 130 246 / 24%);
    --color-primary-border: rgb(59 130 246 / 40%);
    --color-on-primary: #ffffff;
    --color-focus-ring: rgb(96 165 250 / 35%);

    --color-success: #22c55e;
    --color-success-text: #75e0a7;
    --color-success-bg: rgb(34 197 94 / 12%);
    --color-success-border: rgb(34 197 94 / 30%);

    --color-warning: #f59e0b;
    --color-warning-text: #fdb022;
    --color-warning-bg: rgb(245 158 11 / 12%);
    --color-warning-border: rgb(245 158 11 / 30%);

    --color-danger: #ef4444;
    --color-danger-hover: #dc2626;
    --color-danger-text: #fda29b;
    --color-danger-bg: rgb(239 68 68 / 12%);
    --color-danger-border: rgb(239 68 68 / 32%);

    --color-info-text: #84caff;
    --color-info-bg: rgb(59 130 246 / 12%);
    --color-info-border: rgb(59 130 246 / 30%);

    --color-neutral-text: #cbd5e1;
    --color-neutral-bg: rgb(148 163 184 / 12%);
    --color-neutral-border: rgb(148 163 184 / 22%);

    --color-chart-1: #3b82f6;
    --color-chart-2: #34d399;
    --color-chart-3: #fbbf24;
    --color-chart-4: #a78bfa;
    --color-chart-5: #22d3ee;
    --color-chart-6: #fb7185;

    --shadow-xs: 0 1px 2px rgb(0 0 0 / 30%);
    --shadow-sm: 0 1px 3px rgb(0 0 0 / 40%), 0 1px 2px rgb(0 0 0 / 30%);
    --shadow-md: 0 6px 14px -4px rgb(0 0 0 / 50%);
    --shadow-lg: 0 16px 36px -8px rgb(0 0 0 / 60%);
    --shadow-xl: 0 28px 70px -12px rgb(0 0 0 / 70%);

    color-scheme: dark;
}

/* Legacy names ------------------------------------------------------------
   Older stylesheets still read these. They are aliases only: change the
   tokens above, never these. */
body {
    --page: var(--color-bg);
    --chrome: var(--color-surface);
    --chrome-2: var(--color-surface);
    --sidebar: var(--color-surface);
    --sidebar-hover: var(--color-surface-sunken);
    --sidebar-active: var(--color-primary-soft);
    --panel-head: var(--color-surface);
    --panel-bg: var(--color-surface);
    --summary-bg: var(--color-surface-muted);
    --table-head: var(--color-surface-muted);
    --toolbar-bg: var(--color-surface);
    --status-bg: var(--color-surface);
    --button-bg: var(--color-surface);
    --button-hover: var(--color-surface-sunken);
    --button-active: var(--color-primary-soft);
    --line: var(--color-border-strong);
    --line-soft: var(--color-border);
    --line-dark: var(--color-border-strong);
    --text: var(--color-text);
    --muted: var(--color-text-muted);
    --link: var(--color-primary);
    --link-hover: var(--color-primary-hover);
    --icon: var(--color-icon);
    --row-hover: var(--color-surface-muted);
    --status: var(--color-neutral-bg);
    --top-accent: var(--color-primary);
    --brand-bg: var(--color-surface);
    --danger: var(--color-danger);

    --chart-1: var(--color-chart-1);
    --chart-2: var(--color-chart-2);
    --chart-3: var(--color-chart-3);
    --chart-4: var(--color-chart-4);
    --chart-5: var(--color-chart-5);
    --chart-6: var(--color-chart-6);

    --sidebar-width: var(--layout-sidebar);
    --topbar-height: var(--layout-topbar);
    --tabs-height: var(--layout-tabs);

    --ui-shadow: var(--shadow-xs);
    --ui-radius: var(--radius-lg);

    /* One field shape for the whole app. */
    --field-height: var(--control-height);
    --field-padding: 8px 12px;
    --field-radius: var(--radius-md);
    --field-font: var(--text-base);
    --field-bg: var(--color-surface);
}