/* Eulingua — design tokens. Built on the Mariana Design System v2 token model
   (surface/text/border/accent scales), extended with several flashy themes.
   Code blocks always use the Catppuccin-Mocha Chroma stylesheet (/assets/highlight.css),
   so they read like an IDE regardless of the UI theme. */

:root {
  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-mono: "JetBrains Mono", "SF Mono", Monaco, Consolas, monospace;
  --font-display: "Fraunces", Georgia, serif;

  --radius-sm: 6px;  --radius-md: 10px; --radius-lg: 16px; --radius-xl: 22px; --radius-full: 999px;

  --pad-1: 8px; --pad-2: 12px; --pad-3: 16px; --pad-4: 24px; --pad-5: 36px;
  --maxw: 1180px;

  --shadow-sm: 0 1px 2px rgba(0,0,0,.18);
  --shadow-md: 0 8px 30px rgba(0,0,0,.22);
  --shadow-lg: 0 24px 60px -12px rgba(0,0,0,.45);
  --glow: 0 0 0 1px var(--accent-soft), 0 8px 40px -8px var(--accent-soft);

  --transition: 180ms cubic-bezier(.4,0,.2,1);
  --ease-spring: cubic-bezier(.34,1.56,.64,1);
}

/* ---------- dark / mocha (default) ---------- */
[data-theme="dark"] {
  --surface-0:#11111b; --surface-1:#181825; --surface-2:#1e1e2e; --surface-3:#313244;
  --text-1:#cdd6f4; --text-2:#a6adc8; --text-3:#6c7086;
  --border-1:#313244; --border-2:#45475a;
  --accent:#cba6f7; --accent-2:#89b4fa; --accent-3:#f5c2e7;
  --accent-soft:rgba(203,166,247,.16); --accent-fg:#11111b;
  --success:#a6e3a1; --warning:#f9e2af; --danger:#f38ba8;
  --glass:rgba(24,24,37,.6);
  color-scheme: dark;
}
/* ---------- light / latte ---------- */
[data-theme="light"] {
  --surface-0:#eff1f5; --surface-1:#e6e9ef; --surface-2:#ffffff; --surface-3:#dce0e8;
  --text-1:#4c4f69; --text-2:#5c5f77; --text-3:#8c8fa1;
  --border-1:#ccd0da; --border-2:#bcc0cc;
  --accent:#8839ef; --accent-2:#1e66f5; --accent-3:#ea76cb;
  --accent-soft:rgba(136,57,239,.10); --accent-fg:#ffffff;
  --success:#40a02b; --warning:#df8e1d; --danger:#d20f39;
  --glass:rgba(255,255,255,.65);
  color-scheme: light;
}
/* ---------- tokyo ---------- */
[data-theme="tokyo"] {
  --surface-0:#16161e; --surface-1:#1a1b26; --surface-2:#1f2335; --surface-3:#292e42;
  --text-1:#c0caf5; --text-2:#9aa5ce; --text-3:#565f89;
  --border-1:#292e42; --border-2:#3b4261;
  --accent:#7aa2f7; --accent-2:#bb9af7; --accent-3:#7dcfff;
  --accent-soft:rgba(122,162,247,.16); --accent-fg:#16161e;
  --success:#9ece6a; --warning:#e0af68; --danger:#f7768e;
  --glass:rgba(26,27,38,.6);
  color-scheme: dark;
}
/* ---------- rosé pine ---------- */
[data-theme="rose"] {
  --surface-0:#191724; --surface-1:#1f1d2e; --surface-2:#26233a; --surface-3:#2a273f;
  --text-1:#e0def4; --text-2:#908caa; --text-3:#6e6a86;
  --border-1:#2a273f; --border-2:#403d52;
  --accent:#c4a7e7; --accent-2:#ebbcba; --accent-3:#9ccfd8;
  --accent-soft:rgba(196,167,231,.16); --accent-fg:#191724;
  --success:#31748f; --warning:#f6c177; --danger:#eb6f92;
  --glass:rgba(31,29,46,.6);
  color-scheme: dark;
}
/* ---------- synthwave ---------- */
[data-theme="synth"] {
  --surface-0:#160f29; --surface-1:#1f1640; --surface-2:#2b2150; --surface-3:#3a2d63;
  --text-1:#f5e6ff; --text-2:#c4b4e6; --text-3:#8a7bb8;
  --border-1:#3a2d63; --border-2:#52407f;
  --accent:#ff2e97; --accent-2:#2de2e6; --accent-3:#f9c80e;
  --accent-soft:rgba(255,46,151,.18); --accent-fg:#160f29;
  --success:#2de2e6; --warning:#f9c80e; --danger:#ff5d8f;
  --glass:rgba(31,22,64,.55);
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { font-size: 16px; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-sans);
  background: var(--surface-0);
  color: var(--text-1);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  transition: background var(--transition), color var(--transition);
  overflow-x: hidden;
}
a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-2); }
h1,h2,h3 { line-height: 1.2; font-weight: 700; letter-spacing: -.02em; }
code, pre, .mono { font-family: var(--font-mono); }
::selection { background: var(--accent-soft); }

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}