:root {
  color-scheme: light dark;
  --bg: #f7f5f1;
  --surface: #ffffff;
  --surface-soft: #f0ede7;
  --text: #1c1b19;
  --text-soft: #66615a;
  --border: #ded9d0;
  --accent: #2457d6;
  --accent-strong: #1943ae;
  --success: #177a4b;
  --danger: #c53c35;
  --shadow: 0 18px 50px rgba(43, 36, 26, 0.08);
  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --max-width: 1120px;
  --font: Inter, -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", sans-serif;
}

:root[data-theme="dark"] {
  --bg: #12110f;
  --surface: #1d1b18;
  --surface-soft: #28241f;
  --text: #f7f3ec;
  --text-soft: #b9b1a6;
  --border: #3b352e;
  --accent: #7da2ff;
  --accent-strong: #a8beff;
  --shadow: 0 18px 60px rgba(0, 0, 0, 0.28);
}

@media (prefers-color-scheme: dark) {
  :root[data-theme="system"] {
    --bg: #12110f;
    --surface: #1d1b18;
    --surface-soft: #28241f;
    --text: #f7f3ec;
    --text-soft: #b9b1a6;
    --border: #3b352e;
    --accent: #7da2ff;
    --accent-strong: #a8beff;
    --shadow: 0 18px 60px rgba(0, 0, 0, 0.28);
  }
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--bg); color: var(--text); font-family: var(--font); line-height: 1.6; }
a { color: inherit; }
button, input { font: inherit; }
.container { width: min(calc(100% - 40px), var(--max-width)); margin-inline: auto; }
.eyebrow { margin: 0 0 8px; color: var(--accent); font-size: 0.78rem; font-weight: 750; letter-spacing: 0.12em; text-transform: uppercase; }
.muted { color: var(--text-soft); }
.card { padding: 28px; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface); box-shadow: var(--shadow); }
.button { display: inline-flex; min-height: 44px; align-items: center; justify-content: center; gap: 8px; padding: 0 18px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); color: var(--text); font-weight: 700; text-decoration: none; cursor: pointer; }
.button.primary { border-color: var(--accent); background: var(--accent); color: #fff; }
.button.primary:hover { background: var(--accent-strong); }
.button.ghost:hover { border-color: var(--accent); color: var(--accent); }
.button.wide { width: 100%; }
.card .button.wide + .button.wide { margin-top: 10px; }
.hidden { display: none !important; }