/* Design tokens + base typography
   Forest + Persimmon palette, atmospheric mode overrides on body[data-atmospheric] */

@font-face {
  font-family: 'Self Modern';
  src: url('../assets/fonts/SelfModern-Book.otf') format('opentype');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Self Modern';
  src: url('../assets/fonts/SelfModern-Regular.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Self Modern';
  src: url('../assets/fonts/SelfModern-Italic.otf') format('opentype');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Self Modern';
  src: url('../assets/fonts/SelfModern-Semibold.otf') format('opentype');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Self Modern';
  src: url('../assets/fonts/SelfModern-Bold.otf') format('opentype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Light / paper variant (default) */
  --ink: #1F3A2E;
  --paper: #EBE7DE;
  --vermillion: #D96A2C;
  --muted: #7C857A;

  /* Brand action color (CTA buttons, regardless of variant)
     Desaturated baby blue — HSL ≈ (209°, 30%, 70%). */
  --btn-blue: #9CB3C9;
  --btn-blue-hover: #88A1B8;

  --font-display: 'Schibsted Grotesk', system-ui, sans-serif;
  --font-body: 'Hanken Grotesk', 'Söhne', 'Helvetica Neue', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, monospace;

  --canvas: 1280px;
  --pad-x: 56px;
}

/* Atmospheric (home page) overrides */
body[data-atmospheric] {
  --ink: #ECE7D9;
  --paper: #5C6A47;
  --vermillion: #9CB3C9;
  --muted: #B2AE9F;
}

/* Section-page paper-shift derivatives (mixed light) */
body[data-shift="lifted"] { --paper: #F2EFE8; }   /* base + 35% white */
body[data-shift="base"]   { --paper: #EBE7DE; }
body[data-shift="warmer"] { --paper: #DDDAD1; }   /* base + 6% black */

/* Dark facilitation variant */
body[data-dark] {
  --ink: #EBE7DE;
  --paper: #171819;
  --muted: #9A9A95;
}

* { box-sizing: border-box; }
html, body {
  margin: 0; padding: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
/* Body is the positioning context for .bg-bokeh, which stretches the full
   page height so its gradient zones evolve as the user scrolls. */
body {
  position: relative;
  min-height: 100vh;
}
img { max-width: 100%; }
a { color: inherit; }
button { font-family: inherit; }
h1, h2, h3, h4, p { margin: 0; }

/* Center the fixed-width canvas on screens wider than it.
   Background is transparent so the body's atmospheric ground (bokeh + grain
   on the home page, plain paper on section pages) extends to the viewport
   edges instead of being clipped to the canvas column. */
.canvas {
  width: var(--canvas);
  margin: 0 auto;
  background: transparent;
  color: var(--ink);
  position: relative;
  /* z-index: 1 keeps the canvas content above the body-level bokeh + grain
     layers (which paint at z-index: 0). */
  z-index: 1;
  overflow: hidden;
  min-height: 100vh;
}

/* ───── Typography helpers ───── */
.display { font-family: var(--font-display); font-weight: 400; }
.body    { font-family: var(--font-body); }
.mono    {
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.22em;
  font-size: 11px;
}
.em { font-style: italic; color: var(--vermillion); }
.em-blue { color: var(--btn-blue); }