/* ============================================================================
 * base.css — Reset, design tokens, typography, shared utilities.
 *
 * This is the foundation layer. It defines every colour, font and spacing
 * primitive the site uses as a CSS custom property on :root, so components
 * never hard-code a colour. Change a token here and it propagates everywhere.
 *
 * Palette: "Solar" — deep teal (growth, stability, wealth) paired with warm
 * gold (prosperity, optimism). Baked in at build time rather than applied by
 * JavaScript, which is what used to cause a visible colour flash on load.
 * ==========================================================================*/

/* ─── Reset ──────────────────────────────────────────────────────────────── */

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

html {
  scroll-behavior: smooth;
  font-size: 16px;
  /* Stop iOS/Android from inflating text in landscape. */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  font-family: var(--sans);
  background: var(--bg);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* overflow-x guards against decorative elements that sit at negative
     offsets inside the hero graphic on very narrow screens. */
  overflow-x: hidden;
}

a {
  color: inherit;
  text-decoration: none;
}

img {
  display: block;
  max-width: 100%;
}

/* Form controls do not inherit typography by default. */
input,
select,
textarea,
button {
  font-family: inherit;
}

::selection {
  background: oklch(85% 0.1 75);
}

/* Respect the OS "reduce motion" setting. Anything decorative is switched
   off; anything functional collapses to an instant state change. */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ─── Design tokens ──────────────────────────────────────────────────────── */

:root {
  /* Type families */
  --serif: 'Instrument Serif', Georgia, serif;
  --sans: 'Inter Tight', system-ui, -apple-system, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, monospace;

  /* Surfaces */
  --bg: oklch(97% 0.012 178);
  --bg-alt: oklch(92% 0.022 178);
  --bg-dark: oklch(22% 0.1 188);
  --card-bg: white;
  --card-border: oklch(88% 0.022 178);
  --nav-bg: oklch(97% 0.012 178 / 0.95);
  --nav-border: oklch(85% 0.022 178);

  /* Text */
  --ink: oklch(15% 0.05 188);
  --ink-light: oklch(40% 0.06 185);
  --ink-faint: oklch(62% 0.03 185);
  --on-dark: oklch(95% 0.01 178);
  --on-dark-mid: oklch(95% 0.01 178 / 0.55);

  /* Technology accent — teal */
  --blue: oklch(50% 0.22 188);
  --blue-light: oklch(93% 0.07 188);
  --blue-mid: oklch(70% 0.16 185);

  /* Finance accent — gold */
  --gold: oklch(62% 0.2 68);
  --gold-light: oklch(94% 0.07 68);
  --gold-mid: oklch(76% 0.14 68);

  /* Hero ambience */
  --glow-tech: oklch(58% 0.18 188 / 0.15);
  --glow-finance: oklch(70% 0.18 68 / 0.14);

  /* Status */
  --live: oklch(70% 0.18 145);

  /* Timing — how long the hero waits for the intro curtain to lift. Every
     staggered hero animation is expressed as calc(var(--intro-delay) + Ns),
     so when the intro is skipped (repeat visit, or reduce-motion) the JS
     sets this to 0s and the whole page reveals immediately. */
  --intro-delay: 1.55s;

  /* Layout */
  --nav-h: 68px;
  --gutter: clamp(1.5rem, 5vw, 4rem);
  --section-y: clamp(5rem, 10vw, 8rem);
  --maxw: 1200px;

  /* Safe-area insets, so content clears notches and home indicators. */
  --safe-l: env(safe-area-inset-left, 0px);
  --safe-r: env(safe-area-inset-right, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
}

/* ─── Typography ─────────────────────────────────────────────────────────── */

h1,
h2,
h3,
.serif {
  font-family: var(--serif);
  font-weight: 400;
  letter-spacing: -0.015em;
}

.mono {
  font-family: var(--mono);
}

/* ─── Shared utilities ───────────────────────────────────────────────────── */

/* Section wrapper: consistent vertical rhythm and gutters everywhere. */
.section {
  padding: var(--section-y) calc(var(--gutter) + var(--safe-l))
    var(--section-y) calc(var(--gutter) + var(--safe-r));
}

.section-inner {
  max-width: var(--maxw);
  margin: 0 auto;
}

/* The small uppercase label that sits above every section heading. */
.eyebrow {
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: 1rem;
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
}

.eyebrow .rule-gold,
.eyebrow .rule-blue {
  width: 28px;
  height: 1px;
}

.eyebrow .rule-gold {
  background: var(--gold);
}

.eyebrow .rule-blue {
  background: var(--blue);
}

/* Section heading — one clamp() shared by every h2 on the page. */
.section-title {
  font-family: var(--serif);
  font-size: clamp(2.2rem, 5vw, 3.6rem);
  color: var(--ink);
  line-height: 1.05;
  letter-spacing: -0.02em;
  font-weight: 400;
  margin-bottom: 1.25rem;
}

.section-title em {
  color: var(--gold);
  font-style: italic;
}

.section-lede {
  color: var(--ink-light);
  line-height: 1.65;
  font-size: 1.05rem;
  max-width: 560px;
}

/* The small pulsing green "live" dot reused in several places. */
.live-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--live);
  box-shadow: 0 0 8px var(--live);
  animation: pulse 2s ease-in-out infinite;
  flex-shrink: 0;
}

/* Keyboard focus ring — visible, but only for keyboard users. */
:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 3px;
  border-radius: 4px;
}