/* base.css — Nexus design tokens, fluid type scale, light + dark mode */
:root {
  /* Palette (Nexus) */
  --color-bg: #f7f6f2;
  --color-surface: #f9f8f5;
  --color-surface-alt: #fbfbf9;
  --color-border: #d4d1ca;
  --color-text: #28251d;
  --color-text-muted: #565550;
  --color-text-faint: #8c8b86;
  --color-primary: #01696f;
  --color-primary-hover: #0c4e54;
  --color-error: #a13544;
  --color-success: #437a22;

  /* Fluid type scale */
  --text-xs: clamp(0.75rem, 0.72rem + 0.15vw, 0.82rem);
  --text-sm: clamp(0.88rem, 0.85rem + 0.15vw, 0.95rem);
  --text-base: clamp(1rem, 0.97rem + 0.15vw, 1.08rem);
  --text-lg: clamp(1.15rem, 1.1rem + 0.25vw, 1.3rem);
  --text-xl: clamp(1.5rem, 1.4rem + 0.6vw, 2rem);
  --text-2xl: clamp(2rem, 1.7rem + 1.6vw, 3.2rem);
  --text-hero: clamp(2.6rem, 2rem + 3.4vw, 4.6rem);

  /* 4px spacing */
  --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem;
  --space-4: 1rem; --space-6: 1.5rem; --space-8: 2rem;
  --space-12: 3rem; --space-16: 4rem; --space-24: 6rem; --space-32: 8rem;

  --radius-sm: 8px; --radius: 14px; --radius-lg: 22px;
  --shadow-sm: 0 1px 2px oklch(0 0 0 / 0.06);
  --shadow-md: 0 6px 24px oklch(0 0 0 / 0.08);
  --container: 1120px;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
}

@media (prefers-color-scheme: dark) {
  :root {
    --color-bg: #171614;
    --color-surface: #1c1b19;
    --color-surface-alt: #201f1d;
    --color-border: #393836;
    --color-text: #cdccca;
    --color-text-muted: #9c9b97;
    --color-text-faint: #6a6966;
    --color-primary: #4f98a3;
    --color-primary-hover: #6fb0ba;
    --color-error: #dd6974;
    --color-success: #6daa45;
    --shadow-sm: 0 1px 2px oklch(0 0 0 / 0.4);
    --shadow-md: 0 8px 28px oklch(0 0 0 / 0.45);
  }
}

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

html { scroll-behavior: smooth; }

body {
  font-family: "Satoshi", "Inter", system-ui, -apple-system, sans-serif;
  background: var(--color-bg);
  color: var(--color-text);
  line-height: 1.6;
  font-size: var(--text-base);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; }
:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; border-radius: 4px; }

.container { width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 var(--space-6); }