@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@600;700&family=Inter:wght@400;500;600&display=swap');
:root{
  --fn-ink:#122230; --fn-teal:#0E9F8E; --fn-teal-deep:#0B6F66; --fn-volt:#C6F432; --fn-mist:#DCE5E3; --fn-paper:#F5F7F6;
  --font-display:'Space Grotesk',system-ui,sans-serif; --font-ui:'Inter',system-ui,sans-serif;
  --radius-sm:8px; --radius-md:12px; --radius-lg:20px;
  --bg:var(--fn-paper); --surface:#FFFFFF; --text:var(--fn-ink); --text-muted:#4A5B66; --border:var(--fn-mist);
  --primary:var(--fn-teal); --primary-hover:var(--fn-teal-deep); --on-primary:#FFFFFF; --link:var(--fn-teal-deep);
  --accent:var(--fn-volt); --on-accent:var(--fn-ink); --focus:var(--fn-teal);
}
[data-theme="dark"]{
  --bg:var(--fn-ink); --surface:#1A3040; --text:#F5F7F6; --text-muted:#9FB0BA; --border:#2A4152;
  --primary:var(--fn-teal); --primary-hover:#14B8A5; --on-primary:#FFFFFF; --link:#3FD1BF;
  --accent:var(--fn-volt); --on-accent:var(--fn-ink); --focus:var(--fn-volt);
}