/* ========================================================================
   NXT01 — base.css
   Tokens · Reset · Typography
   ======================================================================== */

:root {
  /* Color palette — editorial ink on warm paper, electric coral accent */
  --ink:        #2E2E2E;
  --ink-soft:   #3A3A38;
  --paper:      #F4EFE6;
  --paper-warm: #ECE6D8;
  --paper-deep: #E2DBC9;
  --stone:      #DCD5C7;
  --stone-2:    #C5BDAB;
  --ash:        #6B6562;
  --ash-soft:   #948D85;

  --coral:      #FF5638;
  --coral-soft: #FF8068;
  --signal:     #00B377;
  --amber:      #F5A623;
  --cobalt:     #2B3CE5;

  /* Typography */
  --font-display: "Instrument Serif", "Times New Roman", serif;
  --font-body:    "Geist", "Helvetica Neue", system-ui, sans-serif;
  --font-mono:    "Geist Mono", "JetBrains Mono", "SFMono-Regular", monospace;

  /* Sizing scale (modular) */
  --fs-xs:   12px;
  --fs-sm:   14px;
  --fs-base: 16px;
  --fs-lg:   18px;
  --fs-xl:   24px;
  --fs-2xl:  32px;
  --fs-3xl:  48px;
  --fs-4xl:  72px;
  --fs-5xl:  120px;
  --fs-6xl:  180px;

  /* Layout */
  --container-max: 1440px;
  --gutter: 32px;
  --gutter-mobile: 20px;

  --section-pad: clamp(80px, 10vw, 160px);

  /* Borders & radius */
  --hairline: 1px solid var(--ink);
  --hairline-stone: 1px solid var(--stone);
  --radius-s: 4px;
  --radius-m: 12px;

  /* Motion */
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --duration:    420ms;
}

/* Reset */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  overflow-x: hidden;
  width: 100%;
}
body {
  font-family: var(--font-body);
  font-size: var(--fs-base);
  font-weight: 400;
  line-height: 1.5;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
  width: 100%;
}

img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }
ul, ol { list-style: none; }

/* Selection */
::selection { background: var(--coral); color: var(--paper); }

/* Typography */
h1, h2, h3, h4, h5 {
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: -0.015em;
  line-height: 0.95;
  color: var(--ink);
}

h1 { font-size: clamp(56px, 10vw, var(--fs-5xl)); }
h2 { font-size: clamp(40px, 6vw, 88px); }
h3 { font-size: clamp(28px, 3vw, 48px); }
h4 { font-size: clamp(22px, 2vw, 32px); }

p { font-family: var(--font-body); font-size: var(--fs-base); line-height: 1.55; }

.serif    { font-family: var(--font-display); }
.sans     { font-family: var(--font-body); }
.mono     { font-family: var(--font-mono); }
.italic   { font-style: italic; }
.uppercase{ text-transform: uppercase; letter-spacing: 0.08em; }
.tight    { letter-spacing: -0.02em; }

.label {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--ash);
}

.eyebrow {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--ink);
  display: inline-flex;
  align-items: center;
  gap: 12px;
}
.eyebrow::before {
  content: "";
  width: 24px;
  height: 1px;
  background: var(--ink);
  display: inline-block;
}

/* Utilities */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
}

.divider {
  display: block;
  width: 100%;
  height: 1px;
  background: var(--ink);
  border: 0;
}

.divider-stone { background: var(--stone-2); }