/* Eubeamgua - 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);

  /* Language brand colors are mixed toward --lc-tint by --lc-amt so dark brand
     colors stay readable. Default = brighten (for the
     dark themes); the light themes override to darken slightly instead. */
  --lc-tint: #ffffff;
  --lc-amt: 42%;
}

/* ---------- 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:#a6e3a1; --accent-2:#94e2d5; --accent-3:#89b4fa;
  --accent-soft:rgba(166,227,161,.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:#40a02b; --accent-2:#179299; --accent-3:#1e66f5;
  --accent-soft:rgba(64,160,43,.10); --accent-fg:#ffffff;
  --success:#40a02b; --warning:#df8e1d; --danger:#d20f39;
  --glass:rgba(255,255,255,.65);
  --lc-tint:#0b0d12; --lc-amt:8%;
  color-scheme: light;
}
/* ---------- 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;
}
/* ---------- tokyo night (from Mariana) ---------- */
[data-theme="tokyo-night"] {
  --surface-0:#1a1b26; --surface-1:#16161e; --surface-2:#24283b; --surface-3:#414868;
  --text-1:#c0caf5; --text-2:#a9b1d6; --text-3:#787c99;
  --border-1:#24283b; --border-2:#414868;
  --accent:#7aa2f7; --accent-2:#bb9af7; --accent-3:#7dcfff;
  --accent-soft:rgba(122,162,247,.15); --accent-fg:#1a1b26;
  --success:#9ece6a; --warning:#e0af68; --danger:#f7768e;
  --glass:rgba(22,22,30,.6);
  color-scheme: dark;
}
/* ---------- tokyo midnight (from Mariana) ---------- */
[data-theme="tokyo-midnight"] {
  --surface-0:#06060d; --surface-1:#0a0a14; --surface-2:#10101e; --surface-3:#1a1a2e;
  --text-1:#e8eaf6; --text-2:#c5c8e8; --text-3:#7b7fa8;
  --border-1:#1a1a2e; --border-2:#2a2a4a;
  --accent:#82aaff; --accent-2:#c099ff; --accent-3:#86e1fc;
  --accent-soft:rgba(130,170,255,.18); --accent-fg:#06060d;
  --success:#9ece6a; --warning:#e0af68; --danger:#ff7a93;
  --glass:rgba(10,10,20,.6);
  color-scheme: dark;
}
/* ---------- tokyo night light (from Mariana) ---------- */
[data-theme="tokyo-night-light"] {
  --surface-0:#e1e2e7; --surface-1:#d5d6db; --surface-2:#cbccd1; --surface-3:#b7b9c5;
  --text-1:#343b58; --text-2:#4f566a; --text-3:#6c6e75;
  --border-1:#b7b9c5; --border-2:#9699a3;
  --accent:#2959aa; --accent-2:#5a3e9e; --accent-3:#0f7b9c;
  --accent-soft:rgba(41,89,170,.12); --accent-fg:#ffffff;
  --success:#33635c; --warning:#8f5e15; --danger:#c64343;
  --glass:rgba(225,226,231,.7);
  --lc-tint:#0b0d12; --lc-amt:8%;
  color-scheme: light;
}

* { 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; }
}