:root {
  color-scheme: light dark;
  --color-bg: light-dark(#f7f6f2, #17181b);
  --color-surface: light-dark(#ffffff, #202226);
  --color-sidebar: var(--color-surface);
  --color-surface-raised: light-dark(#f0efeb, #292b30);
  --color-code: var(--color-surface-raised);
  --color-code-text: light-dark(#24252a, #e6e7eb);
  --color-result: var(--color-bg);
  --color-primary: light-dark(#6941b8, #c3a9fb);
  --color-primary-strong: var(--color-primary);
  --color-primary-hover: light-dark(#59349f, #d4bfff);
  --color-on-primary: light-dark(#ffffff, #221a30);
  --color-secondary: light-dark(#eee8f8, #352b46);
  --color-text: light-dark(#25262b, #f0eee9);
  --color-text-muted: light-dark(#62636b, #b4b5bd);
  --color-text-soft: var(--color-text-muted);
  --color-border: light-dark(#dcdcd8, #42454e);
  /* Form controls and focus need stronger edges than decorative card dividers. */
  --color-border-strong: light-dark(#85858d, #858895);
  --color-focus: var(--color-primary);
  --color-brand-tint: color-mix(in srgb, var(--color-primary) 5%, transparent);
  --color-hover: color-mix(in srgb, var(--color-text) 4%, transparent);

  --color-success-text: light-dark(#216345, #a5ddbc);
  --color-success-bg: light-dark(#eaf4ed, #22382c);
  --color-accent: var(--color-success-text);
  --color-warning: light-dark(#855309, #f3c36c);
  --color-warning-text: var(--color-warning);
  --color-warning-bg: light-dark(#fbf0d9, #3b3020);
  --color-danger-text: light-dark(#a14237, #ffb3a8);
  --color-danger: var(--color-danger-text);
  --color-danger-bg: light-dark(#faf0ec, #422b29);
  --color-danger-hover: light-dark(#f3e3dd, #51322e);
  --color-inline-code: light-dark(#a33d2d, #ffaa99);
  --color-inline-code-bg: light-dark(#f1f1f3, #242528);
  --color-inline-code-border: light-dark(#d8cecb, #51423f);

  --color-language-javascript: light-dark(#76540a, #f7df5a);
  --color-language-html: light-dark(#943f1b, #ffb185);
  --color-language-css: light-dark(#235f98, #91c6ff);
  --color-language-java: light-dark(#9a3f30, #ffb29f);
  --color-syntax-comment: light-dark(#62656d, #a0a5b1);
  --color-syntax-keyword: light-dark(#7a2e8e, #d6a4f2);
  --color-syntax-tag: light-dark(#176487, #7dd3fc);
  --color-syntax-property: light-dark(#6742a0, #c4b5fd);
  --color-syntax-string: light-dark(#21633c, #a8cf91);
  --color-syntax-number: light-dark(#175c88, #8fc8f2);
  --color-syntax-literal: light-dark(#833b8c, #f0abfc);
  --color-syntax-builtin: light-dark(#285f9c, #93c5fd);
  --color-syntax-function: light-dark(#725316, #e3c07b);
  --color-syntax-selector: light-dark(#166872, #67e8f9);
  --color-syntax-operator: light-dark(#454b59, #c1c5d0);

  --color-shadow: #000;
  --shadow-soft: 0 4px 16px color-mix(in srgb, var(--color-shadow) 5%, transparent);
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 13px;
  --sidebar-width: 208px;
  --content-width: 768px;
  --font-sans: "Outfit", "Pretendard", "Noto Sans KR", "Inter", system-ui, -apple-system, "BlinkMacSystemFont", "Segoe UI", sans-serif;
  --font-mono: "JetBrains Mono", "SFMono-Regular", "Consolas", "Liberation Mono", monospace;
}

:root[data-theme="light"] { color-scheme: light; }
:root[data-theme="dark"] { color-scheme: dark; }