/* Nova Institute design system: tokens, fonts and base elements for Nova's web pages.
   Values from the Nova Institute design system (tokens.json, Nova Brand Guidelines Draft V1). */

@font-face { font-family: "Poppins"; font-weight: 300; font-style: normal; font-display: swap; src: url("fonts/Poppins-300.woff2") format("woff2"); }
@font-face { font-family: "Poppins"; font-weight: 300; font-style: italic; font-display: swap; src: url("fonts/Poppins-300-italic.woff2") format("woff2"); }
@font-face { font-family: "Poppins"; font-weight: 400; font-style: normal; font-display: swap; src: url("fonts/Poppins-400.woff2") format("woff2"); }
@font-face { font-family: "Poppins"; font-weight: 500; font-style: normal; font-display: swap; src: url("fonts/Poppins-500.woff2") format("woff2"); }
@font-face { font-family: "Poppins"; font-weight: 600; font-style: normal; font-display: swap; src: url("fonts/Poppins-600.woff2") format("woff2"); }
@font-face { font-family: "Poppins"; font-weight: 700; font-style: normal; font-display: swap; src: url("fonts/Poppins-700.woff2") format("woff2"); }
@font-face { font-family: "Poppins"; font-weight: 800; font-style: normal; font-display: swap; src: url("fonts/Poppins-800.woff2") format("woff2"); }

:root {
  --primary-green: #0f3b1c;
  --primary-yellow: #e3994a;
  --primary-lightgreen: #78ab8f;
  --primary-blue: #2b878f;
  --primary-brown: #ab613b;
  --primary-pink: #e57373;
  --secondary-green: #708a78;
  --secondary-yellow: #f0c294;
  --secondary-lightgreen: #b0ccba;
  --secondary-blue: #80b8bd;
  --secondary-brown: #cca18a;
  --secondary-pink: #f0abab;

  --surface: #ffffff;
  --ink: #000000;
  --ink-muted: #262626;
  --heading: var(--primary-green);
  --accent: var(--primary-yellow);
  --subtle: var(--secondary-green);
  --link: var(--primary-green);
  --line: var(--secondary-lightgreen);

  --font-sans: "Poppins", system-ui, sans-serif;

  --space-xs: 8px;
  --space-sm: 16px;
  --space-md: 24px;
  --space-lg: 40px;
  --space-xl: 64px;
  --indent-bullet: 18.9px;

  --radius-card: 16px;
  --radius-swatch: 24px;
  --radius-pill: 9999px;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --surface: var(--primary-green);
    --ink: #ffffff;
    --ink-muted: rgba(255, 255, 255, 0.85);
    --heading: #ffffff;
    --subtle: var(--secondary-lightgreen);
    --link: #ffffff;
    --line: rgba(255, 255, 255, 0.25);
  }
}
:root[data-theme="dark"] {
  --surface: var(--primary-green);
  --ink: #ffffff;
  --ink-muted: rgba(255, 255, 255, 0.85);
  --heading: #ffffff;
  --subtle: var(--secondary-lightgreen);
  --link: #ffffff;
  --line: rgba(255, 255, 255, 0.25);
}

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--surface);
  color: var(--ink);
  font: 400 16px/1.5 var(--font-sans);
}

h1, h2, h3, h4 { color: var(--heading); font-weight: 700; line-height: 1.2; margin: 0 0 var(--space-sm); }
h1 { font-size: 28px; letter-spacing: 0.05em; }
h2 { font-size: 22px; }
h3 { font-size: 18px; }

a { color: var(--link); text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness: 2px; text-underline-offset: 3px; }
a:hover { text-decoration-thickness: 3px; }
a:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; border-radius: 4px; }

em, i, cite { font-weight: 300; font-style: italic; }

.nova-eyebrow { font: 400 14px/1.4 var(--font-sans); letter-spacing: 0.1em; color: var(--ink); margin: 0 0 var(--space-xs); }
.nova-rule { display: block; width: 108px; height: 3px; border-radius: var(--radius-pill); background: var(--accent); border: 0; margin: var(--space-sm) 0 0; }
.nova-subtitle { font: 400 18px/1.3 var(--font-sans); letter-spacing: 0.05em; color: var(--ink); margin: 0; }
.nova-muted { color: var(--ink-muted); }

.nova-logo-light { display: block; }
.nova-logo-dark { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .nova-logo-light { display: none; }
  :root:not([data-theme="light"]) .nova-logo-dark { display: block; }
}
:root[data-theme="dark"] .nova-logo-light { display: none; }
:root[data-theme="dark"] .nova-logo-dark { display: block; }

.nova-tagline { display: inline-flex; align-items: flex-start; gap: 0.25em; font: 400 15px/1.05 var(--font-sans); color: var(--heading); }
.nova-tagline img { width: 1.4em; height: auto; flex: none; }
.nova-tagline span { display: block; }

.nova-footer { border-top: 1px solid var(--accent); margin-top: var(--space-xl); padding-top: var(--space-md); display: flex; flex-wrap: wrap; gap: var(--space-sm); align-items: center; justify-content: space-between; }
.nova-footer .nova-url { font-weight: 700; font-size: 14px; }