/* ---------- Tokens ---------- */
:root {
  --color-bg: #ffffff;
  --color-bg-alt: #f7f8fc;
  --color-text: #14162b;
  --color-text-muted: #5b5f78;
  --color-border: #e6e8f0;
  --color-primary: #4f46e5;
  --color-primary-dark: #4338ca;
  --color-primary-light: #eef2ff;
  --color-accent: #06b6d4;

  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, Helvetica, Arial, sans-serif;

  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 22px;

  --shadow-sm: 0 1px 2px rgba(20, 22, 43, 0.06);
  --shadow-md: 0 8px 24px rgba(20, 22, 43, 0.08);
  --shadow-lg: 0 24px 60px rgba(79, 70, 229, 0.16);

  --max-width: 1160px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --color-bg: #0f1020;
    --color-bg-alt: #15172c;
    --color-text: #eef0ff;
    --color-text-muted: #a4a7c4;
    --color-border: #262a48;
    --color-primary: #6d64f2;
    --color-primary-dark: #837af5;
    --color-primary-light: #201f3d;
    --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.35);
    --shadow-lg: 0 24px 60px rgba(109, 100, 242, 0.25);
  }
}

/* ---------- Reset ---------- */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-sans);
  color: var(--color-text);
  background: var(--color-bg);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul, ol { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, p { margin: 0; }

.container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 24px;
}