:root {
  color-scheme: light;
  --bg: #f2f4f5;
  --surface: #ffffff;
  --surface-soft: #f7f8f9;
  --surface-sunken: #eaedef;
  --surface-elevated: #ffffff;
  --line: #e3e7e9;
  --line-strong: #c8ced2;
  --text: #101619;
  --text-secondary: #39434a;
  --muted: #5f6a72;
  --muted-2: #8b959c;
  --accent: #2563eb;
  --accent-text: color-mix(in srgb, var(--accent) 55%, var(--text));
  --accent-soft: color-mix(in srgb, var(--accent) 9%, var(--surface));
  --accent-line: color-mix(in srgb, var(--accent) 32%, var(--line));
  --accent-strong: color-mix(in srgb, var(--accent) 86%, var(--text));
  --accent-hover: var(--accent-strong);
  --on-accent: #ffffff;
  --green: #0b7a4f;
  --green-text: #076b44;
  --green-soft: #e7f5ee;
  --green-line: #a9dcc4;
  --amber: #8a5300;
  --amber-text: #7a4900;
  --amber-soft: #fdf1de;
  --amber-line: #eacb92;
  --red: #b42318;
  --red-text: #a01d13;
  --red-soft: #fdecea;
  --red-line: #f0b7ae;
  --violet: #6742c8;
  --violet-text: #5b39b8;
  --violet-soft: #efeaff;
  --violet-line: #c8b7f2;
  --blue: var(--accent);
  --blue-soft: var(--accent-soft);
  --primary: var(--accent);
  --success: var(--green);
  --warning: var(--amber);
  --danger: var(--red);
  --border: var(--line);
  --surface-subtle: var(--surface-soft);
  --text-muted: var(--muted);
  --btn-secondary-bg: var(--surface);
  --btn-secondary-border: var(--line-strong);
  --btn-secondary-text: var(--text-secondary);
  --btn-ghost-text: var(--text-secondary);
  --input-bg: var(--surface);
  --input-border: var(--line-strong);
  --input-placeholder: var(--muted);
  --nav-text: var(--text-secondary);
  --nav-active-bg: color-mix(in srgb, var(--accent) 8%, var(--surface));
  --nav-active-border: color-mix(in srgb, var(--accent) 26%, var(--line));
  --nav-active-text: var(--accent-text);
  --row-selected-bg: color-mix(in srgb, var(--accent) 7%, var(--surface));
  --row-selected-text: var(--text);
  --row-hover-bg: var(--surface-soft);
  --avatar-bg: color-mix(in srgb, var(--accent) 12%, var(--surface));
  --avatar-text: var(--accent-text);
  --admin-note-bg: var(--accent-soft);
  --admin-note-border: var(--accent-line);
  --admin-note-text: var(--accent-text);
  --brand-mark-bg: #101619;
  --brand-mark-text: #ffffff;
  --on-primary: var(--on-accent);
  --focus-ring: color-mix(in srgb, var(--accent) 42%, transparent);
  --overlay: color-mix(in srgb, #0b0f11 52%, transparent);
  --shadow-sm: 0 1px 2px rgb(16 22 25 / 0.06), 0 1px 1px rgb(16 22 25 / 0.04);
  --shadow: 0 6px 20px -6px rgb(16 22 25 / 0.12), 0 1px 3px rgb(16 22 25 / 0.06);
  --shadow-lg: 0 28px 64px -16px rgb(16 22 25 / 0.24), 0 4px 12px rgb(16 22 25 / 0.08);
  --radius-xs: 4px;
  --radius-sm: 7px;
  --radius: 10px;
  --radius-lg: 14px;
  --radius-pill: 999px;
  --touch-min: 40px;
  --control-h: 36px;
  --row-h: 44px;
  --sidebar-w: 232px;
  --sidebar-w-collapsed: 60px;
  --topbar-h: 56px;
  --mobile-nav-h: 62px;
  --gutter: clamp(14px, 1.4vw, 24px);
  --font-sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Inter, Roboto, "Helvetica Neue", sans-serif;
  --font-mono: ui-monospace, "SF Mono", SFMono-Regular, "JetBrains Mono", "Roboto Mono", Menlo, Consolas, monospace;
  --font: var(--font-sans);
  --fs-micro: 0.6875rem;
  --fs-xs: 0.75rem;
  --fs-sm: 0.8125rem;
  --fs-md: 0.875rem;
  --fs-lg: 1rem;
  --fs-xl: 1.125rem;
  --fs-2xl: 1.375rem;
  --fs-3xl: 1.75rem;
  --track-label: 0.06em;
  --track-tight: -0.011em;
  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --dur-fast: 120ms;
  --dur: 220ms;
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0d1012;
  --surface: #14181b;
  --surface-soft: #191e22;
  --surface-sunken: #101416;
  --surface-elevated: #1b2126;
  --line: #262c31;
  --line-strong: #3a444c;
  --text: #e9edef;
  --text-secondary: #b6c0c7;
  --muted: #8d979f;
  --muted-2: #6b757c;
  --accent-text: color-mix(in srgb, var(--accent) 62%, var(--text));
  --accent-soft: color-mix(in srgb, var(--accent) 18%, var(--surface));
  --accent-line: color-mix(in srgb, var(--accent) 40%, var(--line));
  --accent-strong: color-mix(in srgb, var(--accent) 84%, #ffffff);
  --green: #3fbf85;
  --green-text: #5fd39b;
  --green-soft: #10281f;
  --green-line: #1f5641;
  --amber: #e0a13a;
  --amber-text: #f0b64a;
  --amber-soft: #2b2210;
  --amber-line: #5e4a1c;
  --red: #f27a6d;
  --red-text: #ff9186;
  --red-soft: #2e1817;
  --red-line: #63302c;
  --violet: #a98cf5;
  --violet-text: #c3aaff;
  --violet-soft: #211c38;
  --violet-line: #43386b;
  --btn-secondary-bg: var(--surface-elevated);
  --btn-secondary-border: var(--line-strong);
  --btn-secondary-text: var(--text);
  --btn-ghost-text: var(--text-secondary);
  --input-bg: var(--surface-sunken);
  --input-border: var(--line-strong);
  --nav-active-bg: color-mix(in srgb, var(--accent) 16%, var(--surface));
  --nav-active-border: color-mix(in srgb, var(--accent) 38%, var(--line));
  --row-selected-bg: color-mix(in srgb, var(--accent) 14%, var(--surface));
  --row-selected-text: var(--text);
  --row-hover-bg: var(--surface-soft);
  --avatar-bg: color-mix(in srgb, var(--accent) 22%, var(--surface));
  --brand-mark-bg: color-mix(in srgb, var(--accent) 26%, var(--surface-elevated));
  --brand-mark-text: var(--text);
  --focus-ring: color-mix(in srgb, var(--accent) 55%, transparent);
  --overlay: color-mix(in srgb, #050708 68%, transparent);
  --shadow-sm: 0 1px 2px rgb(0 0 0 / 0.4);
  --shadow: 0 8px 24px -8px rgb(0 0 0 / 0.6), 0 1px 3px rgb(0 0 0 / 0.4);
  --shadow-lg: 0 32px 72px -20px rgb(0 0 0 / 0.7), 0 4px 14px rgb(0 0 0 / 0.5);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #0d1012;
    --surface: #14181b;
    --surface-soft: #191e22;
    --surface-sunken: #101416;
    --surface-elevated: #1b2126;
    --line: #262c31;
    --line-strong: #3a444c;
    --text: #e9edef;
    --text-secondary: #b6c0c7;
    --muted: #8d979f;
    --muted-2: #6b757c;
    --accent-text: color-mix(in srgb, var(--accent) 62%, var(--text));
    --accent-soft: color-mix(in srgb, var(--accent) 18%, var(--surface));
    --accent-line: color-mix(in srgb, var(--accent) 40%, var(--line));
    --accent-strong: color-mix(in srgb, var(--accent) 84%, #ffffff);
    --green: #3fbf85;
    --green-text: #5fd39b;
    --green-soft: #10281f;
    --green-line: #1f5641;
    --amber: #e0a13a;
    --amber-text: #f0b64a;
    --amber-soft: #2b2210;
    --amber-line: #5e4a1c;
    --red: #f27a6d;
    --red-text: #ff9186;
    --red-soft: #2e1817;
    --red-line: #63302c;
    --violet: #a98cf5;
    --violet-text: #c3aaff;
    --violet-soft: #211c38;
    --violet-line: #43386b;
    --btn-secondary-bg: var(--surface-elevated);
    --btn-secondary-border: var(--line-strong);
    --btn-secondary-text: var(--text);
    --btn-ghost-text: var(--text-secondary);
    --input-bg: var(--surface-sunken);
    --input-border: var(--line-strong);
    --nav-active-bg: color-mix(in srgb, var(--accent) 16%, var(--surface));
    --nav-active-border: color-mix(in srgb, var(--accent) 38%, var(--line));
    --row-selected-bg: color-mix(in srgb, var(--accent) 14%, var(--surface));
    --row-selected-text: var(--text);
    --row-hover-bg: var(--surface-soft);
    --avatar-bg: color-mix(in srgb, var(--accent) 22%, var(--surface));
    --brand-mark-bg: color-mix(in srgb, var(--accent) 26%, var(--surface-elevated));
    --brand-mark-text: var(--text);
    --focus-ring: color-mix(in srgb, var(--accent) 55%, transparent);
    --overlay: color-mix(in srgb, #050708 68%, transparent);
    --shadow-sm: 0 1px 2px rgb(0 0 0 / 0.4);
    --shadow: 0 8px 24px -8px rgb(0 0 0 / 0.6), 0 1px 3px rgb(0 0 0 / 0.4);
    --shadow-lg: 0 32px 72px -20px rgb(0 0 0 / 0.7), 0 4px 14px rgb(0 0 0 / 0.5);
  }
}

:root {
  --color-canvas: var(--bg);
  --color-surface: var(--surface);
  --color-surface-elevated: var(--surface-elevated);
  --color-surface-muted: var(--surface-soft);
  --color-foreground: var(--text);
  --color-foreground-muted: var(--muted);
  --color-border: var(--line);
  --color-divider: var(--line);
  --color-focus: var(--accent);
  --color-primary: var(--accent);
  --color-accent: var(--amber);
  --color-success: var(--green);
  --color-warning: var(--amber);
  --color-danger: var(--red);
  --color-info: var(--accent);
  --font-family: var(--font-sans);
  --font-body: var(--fs-md);
  --font-small: var(--fs-sm);
  --font-heading: var(--fs-xl);
  --font-title: var(--fs-3xl);
  --line-body: 1.5;
  --radius-md: var(--radius);
  --radius-pill: 999px;
  --shadow-1: var(--shadow-sm);
  --shadow-2: var(--shadow);
  --control-height: var(--control-h);
  --target-min: var(--touch-min);
  --density-gap: 12px;
  --density-row-height: var(--row-h);
  --motion-fast: var(--dur-fast);
  --motion-normal: var(--dur);
  --ease-standard: var(--ease);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}