/* base.css — design tokens + reset */
:root {
  /* fluid type scale */
  --text-xs: clamp(0.72rem, 0.7rem + 0.1vw, 0.78rem);
  --text-sm: clamp(0.85rem, 0.82rem + 0.15vw, 0.92rem);
  --text-base: clamp(1rem, 0.96rem + 0.2vw, 1.08rem);
  --text-lg: clamp(1.13rem, 1.05rem + 0.4vw, 1.28rem);
  --text-xl: clamp(1.4rem, 1.25rem + 0.7vw, 1.7rem);
  --text-2xl: clamp(1.8rem, 1.5rem + 1.4vw, 2.4rem);
  --text-3xl: clamp(2.4rem, 1.9rem + 2.4vw, 3.6rem);
  --text-hero: clamp(2.8rem, 2.1rem + 3.6vw, 5rem);

  /* spacing (4px grid) */
  --sp-1: 0.25rem; --sp-2: 0.5rem; --sp-3: 0.75rem; --sp-4: 1rem;
  --sp-5: 1.25rem; --sp-6: 1.5rem; --sp-7: 1.75rem; --sp-8: 2rem; --sp-10: 2.5rem;
  --sp-12: 3rem; --sp-16: 4rem; --sp-20: 5rem; --sp-24: 6rem; --sp-32: 8rem;

  /* radii */
  --r-sm: 4px; --r-md: 8px; --r-lg: 14px; --r-xl: 22px; --r-2xl: 32px;

  /* container */
  --container: 1240px;
  --container-narrow: 880px;

  /* motion */
  --ease: cubic-bezier(0.2, 0.7, 0.15, 1);

  /* dark theme is default for aerospace look */
  color-scheme: dark;

  /* Dark palette — Borealis green-on-deep-teal (per PPTX brand) */
  /* PPTX bg gradient #084A4A → #1A6060 (deep teal-green) */
  --bg: #073838;                              /* deeper than PPTX gradient bottom for richer surface */
  --bg-elev-1: #0c4d4d;                       /* between gradient stops */
  --bg-elev-2: #146060;
  --bg-elev-3: #1c7373;
  --fg: #ffffff;
  --fg-muted: rgba(255,255,255,0.74);
  --fg-subtle: rgba(255,255,255,0.55);
  --border: rgba(255,255,255,0.14);
  --border-strong: rgba(255,255,255,0.28);

  /* Accent — PPTX bright green + complementary forest + warm callout */
  --accent: #4EA72E;                          /* PPTX accent6 bright green — primary CTA */
  --accent-fg: #ffffff;
  --accent-soft: rgba(78,167,46,0.18);
  --accent-2: #196B24;                        /* PPTX accent3 forest green */
  --accent-2-soft: rgba(25,107,36,0.22);
  --teal: #5ce0c4;                            /* leftover Borealis teal accent for highlights */
  --amber: #E97132;                           /* PPTX accent2 warm orange — sparingly */
  --purple: #A02B93;                          /* PPTX accent5 magenta */
  --info: #0F9ED5;                            /* PPTX accent4 cyan */
  --danger: oklch(68% 0.20 25);

  /* shadows */
  --sh-sm: 0 1px 2px rgba(0,0,0,0.25);
  --sh-md: 0 6px 22px rgba(0,0,0,0.35);
  --sh-lg: 0 22px 60px rgba(0,0,0,0.45);
  --glow: 0 0 0 1px rgba(78,167,46,0.42), 0 0 28px rgba(78,167,46,0.32);
}

:root[data-theme="light"] {
  color-scheme: light;
  --bg: #f5faf6;                              /* warm cream-white */
  --bg-elev-1: #ffffff;
  --bg-elev-2: #ebf3ed;
  --bg-elev-3: #d9e7dc;
  --fg: #0e2417;                              /* dark forest text */
  --fg-muted: rgba(14,36,23,0.70);
  --fg-subtle: rgba(14,36,23,0.55);
  --border: rgba(14,36,23,0.14);
  --border-strong: rgba(14,36,23,0.28);
  --accent: #196B24;                          /* PPTX forest green is primary in light mode */
  --accent-fg: #ffffff;
  --accent-soft: rgba(25,107,36,0.14);
  --accent-2: #0e4a18;
  --accent-2-soft: rgba(14,74,24,0.14);
  --teal: #0e7a6a;
  --amber: #c2541b;
  --purple: #7a1e6f;
  --info: #0a7aab;
  --sh-sm: 0 1px 2px rgba(0,0,0,0.06);
  --sh-md: 0 6px 22px rgba(0,0,0,0.08);
  --sh-lg: 0 22px 60px rgba(0,0,0,0.12);
  --glow: 0 0 0 1px rgba(25,107,36,0.5), 0 0 28px rgba(25,107,36,0.20);
}

/* reset */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  font-family: var(--font-body, 'Satoshi', 'Inter', system-ui, sans-serif);
  font-size: var(--text-base);
  line-height: 1.55;
  color: var(--fg);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}
img, video, svg { display: block; max-width: 100%; height: auto; }
/* photos get a subtle backdrop while loading; logos/marks must stay transparent */
img:not([class*="mark"]):not([class*="logo"]), video { background: var(--bg-elev-2); }
.hero-logo img, .logo img, .brand-mark, .borealis-mark { background: transparent; }
button { font: inherit; cursor: pointer; }
a { color: inherit; }
h1,h2,h3,h4,h5,h6 { margin: 0; line-height: 1.15; font-family: var(--font-display, 'Cabinet Grotesk','Satoshi',system-ui,sans-serif); font-weight: 600; letter-spacing: -0.01em; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}