:root {
  color-scheme: light;

  --font-base: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
    "Segoe UI", sans-serif;

  --app-bg: #f7f6f2;
  --app-bg-deep: #eeece5;
  --app-bg-wash-1: rgba(119, 104, 246, 0.12);
  --app-bg-wash-2: rgba(255, 196, 116, 0.14);

  --surface-1: #ffffff;
  --surface-2: #faf9f6;
  --surface-3: #f0eee8;
  --surface-glass-1: rgba(255, 255, 255, 0.92);
  --surface-glass-2: rgba(255, 255, 255, 0.76);
  --surface-glass-3: rgba(255, 255, 255, 0.64);
  --surface-glass-4: rgba(255, 255, 255, 0.72);
  --surface-glass-muted: rgba(247, 246, 242, 0.78);
  --surface-overlay: rgba(37, 37, 32, 0.26);

  --text-1: #252520;
  --text-2: #4a4740;
  --text-3: #7b766b;
  --text-4: #9a9488;
  --text-on-accent: #ffffff;

  --border-1: rgba(37, 37, 32, 0.1);
  --border-2: rgba(37, 37, 32, 0.18);
  --border-subtle: rgba(37, 37, 32, 0.08);

  --accent: #7768f6;
  --accent-strong: #6658df;
  --accent-soft: #ece9ff;
  --accent-border: rgba(119, 104, 246, 0.42);
  --accent-border-strong: rgba(119, 104, 246, 0.65);
  --accent-tint: rgba(119, 104, 246, 0.08);
  --accent-ring: 0 0 0 4px rgba(119, 104, 246, 0.1);
  --accent-ring-strong: 0 0 0 4px rgba(119, 104, 246, 0.12);
  --accent-shadow-sm: 0 12px 28px rgba(119, 104, 246, 0.25);
  --accent-shadow-md: 0 16px 34px rgba(119, 104, 246, 0.32);

  --danger: #e25d5d;
  --danger-soft: #ffe8e8;
  --danger-soft-strong: #ffdcdc;
  --danger-border: rgba(226, 93, 93, 0.24);
  --danger-border-strong: rgba(226, 93, 93, 0.42);

  --warning: #d8962f;
  --warning-soft: #fff0d2;
  --warning-text: #9a6518;

  --success: #3fa875;
  --success-soft: #e1f7ec;
  --success-text: #34764f;

  --focus-ring: 0 0 0 4px rgba(119, 104, 246, 0.1);
  --focus-outline: rgba(119, 104, 246, 0.35);

  --color-bg: var(--app-bg);
  --color-bg-deep: var(--app-bg-deep);
  --color-surface: var(--surface-1);
  --color-surface-soft: var(--surface-2);
  --color-surface-muted: var(--surface-3);

  --color-text: var(--text-1);
  --color-text-soft: var(--text-2);
  --color-muted: var(--text-3);
  --color-muted-2: var(--text-4);

  --color-border: var(--border-1);
  --color-border-strong: var(--border-2);

  --color-primary: var(--accent);
  --color-primary-hover: var(--accent-strong);
  --color-primary-soft: var(--accent-soft);
  --color-primary-text: var(--text-on-accent);

  --color-danger: var(--danger);
  --color-danger-soft: var(--danger-soft);

  --color-success: var(--success);
  --color-success-soft: var(--success-soft);

  --color-warning: var(--warning);
  --color-warning-soft: var(--warning-soft);

  --note-yellow: #fff4b8;
  --note-blue: #dceeff;
  --note-green: #ddf8e8;
  --note-pink: #ffe1ec;
  --note-orange: #ffe4c7;
  --note-purple: #ebe5ff;
  --note-white: #ffffff;

  --radius-xs: 6px;
  --radius-sm: 10px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-xl: 26px;
  --radius-full: 999px;

  --shadow-xs: 0 1px 2px rgba(20, 20, 20, 0.06);
  --shadow-sm: 0 8px 24px rgba(20, 20, 20, 0.08);
  --shadow-md: 0 16px 45px rgba(20, 20, 20, 0.1);
  --shadow-lg: 0 24px 70px rgba(20, 20, 20, 0.14);

  --topbar-height: 64px;
  --workspace-chrome-height: 3rem;
  --sidebar-width: 320px;
  --inspector-width: 320px;

  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;

  --transition-fast: 140ms ease;
  --transition-base: 220ms ease;
  --transition-slow: 360ms ease;

  --z-base: 1;
  --z-board: 5;
  --z-sidebar: 20;
  --z-topbar: 30;
  --z-floating: 40;
  --z-modal: 80;
  --z-toast: 100;
}

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

  --app-bg: #101214;
  --app-bg-deep: #0b0d0f;
  --app-bg-wash-1: rgba(144, 132, 255, 0.14);
  --app-bg-wash-2: rgba(82, 168, 142, 0.1);

  --surface-1: #191c20;
  --surface-2: #20242a;
  --surface-3: #2a2f37;
  --surface-glass-1: rgba(25, 28, 32, 0.94);
  --surface-glass-2: rgba(25, 28, 32, 0.78);
  --surface-glass-3: rgba(25, 28, 32, 0.66);
  --surface-glass-4: rgba(25, 28, 32, 0.72);
  --surface-glass-muted: rgba(32, 36, 42, 0.78);
  --surface-overlay: rgba(0, 0, 0, 0.54);

  --text-1: #f5f1e8;
  --text-2: #d7d1c4;
  --text-3: #aaa397;
  --text-4: #7f786f;
  --text-on-accent: #111214;

  --border-1: rgba(245, 241, 232, 0.12);
  --border-2: rgba(245, 241, 232, 0.22);
  --border-subtle: rgba(245, 241, 232, 0.09);

  --accent: #9d92ff;
  --accent-strong: #b7afff;
  --accent-soft: rgba(157, 146, 255, 0.18);
  --accent-border: rgba(157, 146, 255, 0.42);
  --accent-border-strong: rgba(157, 146, 255, 0.66);
  --accent-tint: rgba(157, 146, 255, 0.12);
  --accent-ring: 0 0 0 4px rgba(157, 146, 255, 0.16);
  --accent-ring-strong: 0 0 0 4px rgba(157, 146, 255, 0.2);
  --accent-shadow-sm: 0 12px 28px rgba(0, 0, 0, 0.28);
  --accent-shadow-md: 0 16px 34px rgba(0, 0, 0, 0.34);

  --danger: #ff8b8b;
  --danger-soft: rgba(255, 139, 139, 0.15);
  --danger-soft-strong: rgba(255, 139, 139, 0.22);
  --danger-border: rgba(255, 139, 139, 0.32);
  --danger-border-strong: rgba(255, 139, 139, 0.48);

  --warning: #f2c16d;
  --warning-soft: rgba(242, 193, 109, 0.16);
  --warning-text: #f4cf8e;

  --success: #75d6a0;
  --success-soft: rgba(117, 214, 160, 0.16);
  --success-text: #98e2b8;

  --focus-ring: 0 0 0 4px rgba(157, 146, 255, 0.16);
  --focus-outline: rgba(157, 146, 255, 0.7);

  --note-yellow: #3c3523;
  --note-blue: #223445;
  --note-green: #213a2d;
  --note-pink: #422936;
  --note-orange: #463224;
  --note-purple: #302d4f;
  --note-white: #252a31;

  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.26);
  --shadow-sm: 0 8px 24px rgba(0, 0, 0, 0.28);
  --shadow-md: 0 16px 45px rgba(0, 0, 0, 0.34);
  --shadow-lg: 0 24px 70px rgba(0, 0, 0, 0.42);
}

@media (max-width: 760px) {
  :root {
    --topbar-height: 56px;
    --workspace-chrome-height: 2.5rem;
  }
}