/* Design tokens, CSS reset, and base styles — shared across all pages */

@font-face { font-family: 'Metropolis'; src: url('/fonts/metropolis-400.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Metropolis'; src: url('/fonts/metropolis-600.woff2') format('woff2'); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: 'Metropolis'; src: url('/fonts/metropolis-700.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; }

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
button, input, select, textarea, optgroup { font-family: inherit; }

:root {
  --bg: #0e1620;
  --surface: #1a2535;
  --border: #263040;
  --primary: #7ec8a0;
  --primary-dark: #5db589;
  --primary-light: rgba(126,200,160,0.12);
  --text: #e4eaf2;
  --text-muted: #7a8fa6;
  --shadow: 0 1px 3px rgba(0,0,0,0.3), 0 1px 2px rgba(0,0,0,0.2);
  --shadow-lg: 0 4px 16px rgba(0,0,0,0.4);
  --radius: 12px;
  --radius-sm: 8px;
  --green: #5db589;
  --red: #e05a5a;
  --star: #f59e0b;
}

[data-theme="light"] {
  --bg: #eef2f7;
  --surface: #ffffff;
  --border: #c8d3de;
  --primary: #2e7d56;
  --primary-dark: #1f5e3e;
  --primary-light: rgba(46,125,86,0.10);
  --text: #1a2330;
  --text-muted: #4a5e6e;
  --shadow: 0 1px 3px rgba(0,0,0,0.09), 0 1px 2px rgba(0,0,0,0.05);
  --shadow-lg: 0 4px 16px rgba(0,0,0,0.12);
  --green: #2e7d56;
  --red: #c81d1d;
}

html, body {
  height: 100%;
  font-family: 'Metropolis', 'Plus Jakarta Sans', Helvetica, Arial, sans-serif;
  background: var(--bg);
  color: var(--text);
}

/* Theme-aware logos — light/dark variant via CSS, no JS needed */
.site-logo { width: auto; image-rendering: -webkit-optimize-contrast; display: block; }
.logo-dark { display: none; }
[data-theme="dark"] .logo-light { display: none; }
[data-theme="dark"] .logo-dark { display: block; }