/* DSDX Look & Feel proposal v1 — shared semantic foundation only. */
:root {
  color-scheme: light;
  --bg: #faf8ff;
  --surface: #fff;
  --surface-alt: #f2edf8;
  --sidebar: #f1ebf8;
  --text: #26143b;
  --text-secondary: #62516f;
  --text-muted: #796b85;
  --border: #e3dced;
  --border-strong: #a594b4;
  --accent: #763cb2;
  --accent-hover: #642c9e;
  --accent-soft: #f4e9f8;
  --on-accent: #fff;
  --action: #ff9dbc;
  --action-end: #d3b1ff;
  --action-hover: #ffc1d2;
  --on-action: #18072d;
  --success: #146c43;
  --success-soft: #e6f4ec;
  --warning: #805000;
  --warning-soft: #fff2cf;
  --danger: #b42332;
  --danger-soft: #fff0f1;
  --focus: #9251c4;
  --shadow: 0 10px 34px rgb(55 22 81 / 6%);
  --panel-fill: #fff;
  --orb-opacity: .56;

  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans KR", sans-serif;
  --font-mono: "Cascadia Code", "SFMono-Regular", Consolas, monospace;
  --text-body: 15px;
  --text-label: 14px;
  --text-help: 13px;
  --text-caption: 12px;
  --text-h1: 32px;
  --text-h2: 24px;
  --text-h3: 16px;
  --line-body: 1.5;
  --line-heading: 1.25;
  --radius-control: 8px;
  --radius-card: 12px;
  --radius-modal: 16px;
  --control-height: 44px;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 28px;
  --space-8: 32px;
  --space-9: 36px;
  --space-10: 40px;
  --space-11: 44px;
  --space-12: 48px;
  --space-16: 64px;
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #101114;
  --surface: #18191d;
  --surface-alt: #222328;
  --sidebar: #141519;
  --text: #ececf1;
  --text-secondary: #c4c4ce;
  --text-muted: #a3a4af;
  --border: #34353d;
  --border-strong: #686975;
  --accent: #cbb3f5;
  --accent-hover: #dfc9ff;
  --accent-soft: #2f263d;
  --on-accent: #21172d;
  --action: #e6b4cf;
  --action-end: #c2b2e8;
  --action-hover: #f1c4da;
  --on-action: #20162a;
  --success: #8bdfa8;
  --success-soft: #162c20;
  --warning: #f1c878;
  --warning-soft: #302613;
  --danger: #ffa2ac;
  --danger-soft: #351c22;
  --focus: #d4b7ff;
  --shadow: 0 10px 30px rgb(0 0 0 / 12%);
  --panel-fill: #17181c;
  --orb-opacity: .12;
}

*, *::before, *::after { box-sizing: border-box; }
html { min-width: 320px; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: var(--text-body);
  line-height: var(--line-body);
  -webkit-font-smoothing: antialiased;
}
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }
button:disabled { cursor: default; }
code, pre, kbd, samp { font-family: var(--font-mono); }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
::selection { color: var(--on-accent); background: var(--accent); }

/* Only the theme picker is shared here; each mockup owns its layout. */
.theme-switch {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-1);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  background: var(--surface-alt);
}
.theme-switch [data-set-theme] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: var(--control-height);
  min-width: 80px;
  padding: var(--space-2) var(--space-3);
  border: 1px solid transparent;
  border-radius: var(--radius-control);
  background: transparent;
  color: var(--text-secondary);
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
}
.theme-switch [data-set-theme]:hover {
  color: var(--text);
  background: var(--surface);
}
.theme-switch [data-set-theme][aria-pressed="true"] {
  border-color: var(--accent);
  background: var(--accent);
  color: var(--on-accent);
}
.theme-switch [data-set-theme][aria-pressed="true"]:hover {
  border-color: var(--accent-hover);
  background: var(--accent-hover);
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; }
}