/* =========================================================
   base.css — design tokens, reset, typography, layout
   helpers and the scroll-reveal utility.
   ========================================================= */

/* ---------- Design tokens ---------- */
:root {
  /* Brand constants — identical in both themes */
  --navy: #1e3a6e;
  --navy-deep: #14264a;
  --navy-deeper: #0f1d3a;
  --green: #7cb342;
  --green-bright: #8fd14f;
  --white: #ffffff;

  /* Semantic colours — LIGHT theme (default) */
  --bg: #f2f5ec;
  --paper: #f2f5ec;            /* legacy alias */
  --heading: #1e3a6e;
  --ink: #1c2942;
  --muted: #5a6b88;
  --line: rgba(30, 58, 110, 0.10);
  --card-bg: rgba(255, 255, 255, 0.70);
  --card-border: rgba(255, 255, 255, 0.90);
  --input-bg: #ffffff;
  --input-text: #1c2942;
  --pill-bg: rgba(30, 58, 110, 0.06);
  --pill-border: rgba(30, 58, 110, 0.10);
  --pill-text: #1e3a6e;
  --header-bg: rgba(244, 247, 238, 0.85);
  --menu-bg: rgba(255, 255, 255, 0.97);

  /* Sizing, shadow, type */
  --radius: 18px;
  --radius-lg: 26px;
  --maxw: 1200px;
  --shadow-soft: 0 18px 40px -22px rgba(20, 38, 74, 0.35);
  --shadow-lift: 0 28px 60px -24px rgba(20, 38, 74, 0.45);
  --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}

/* ---------- DARK theme overrides ---------- */
[data-theme="dark"] {
  --bg: #0d1730;
  --paper: #0d1730;
  --heading: #ffffff;
  --ink: #e7ecf5;
  --muted: #9fb0cc;
  --line: rgba(255, 255, 255, 0.12);
  --card-bg: rgba(255, 255, 255, 0.05);
  --card-border: rgba(255, 255, 255, 0.12);
  --input-bg: rgba(255, 255, 255, 0.06);
  --input-text: #eef2f8;
  --pill-bg: rgba(255, 255, 255, 0.08);
  --pill-border: rgba(255, 255, 255, 0.16);
  --pill-text: #dfe7f2;
  --header-bg: rgba(13, 23, 48, 0.85);
  --menu-bg: rgba(20, 30, 55, 0.97);
}

/* ---------- Reset ---------- */
* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: 112px; }

body {
  font-family: var(--font);
  color: var(--ink);
  background: var(--bg);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  transition: background-color .4s ease, color .4s ease;
}

/* ---------- Typography ---------- */
h1, h2, h3 { line-height: 1.12; letter-spacing: -0.02em; color: var(--heading); transition: color .4s ease; }
h1 { font-size: clamp(2.4rem, 6vw, 4rem); font-weight: 800; }
h2 { font-size: clamp(1.9rem, 4vw, 2.9rem); font-weight: 800; }
h3 { font-size: 1.18rem; font-weight: 700; }
p { color: var(--muted); transition: color .4s ease; }
a { color: inherit; text-decoration: none; }

/* ---------- Layout helpers ---------- */
.wrap { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }

section { padding: clamp(72px, 10vw, 130px) 0; position: relative; }

.eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 0.78rem; font-weight: 700; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--green);
  margin-bottom: 18px;
}
.eyebrow::before { content: ""; width: 28px; height: 2px; background: var(--green); border-radius: 2px; }

.section-head { max-width: 720px; margin-bottom: 56px; }
.section-head p { margin-top: 16px; font-size: 1.08rem; }

/* ---------- Scroll-reveal utility (driven by js/reveal.js) ---------- */
.reveal { opacity: 0; transform: translateY(34px); transition: opacity .7s ease, transform .7s ease; }
.reveal.in { opacity: 1; transform: none; }
.reveal.d1 { transition-delay: .08s; }
.reveal.d2 { transition-delay: .16s; }
.reveal.d3 { transition-delay: .24s; }
.reveal.d4 { transition-delay: .32s; }
.reveal.d5 { transition-delay: .40s; }