/* ============================================================
   base.css — tokens, reset, fluid type
   Palette: paper midnight + warm cream + single ember accent
   ============================================================ */

:root {
  /* Color — intentional, restrained */
  --ink-0:      oklch(0.09 0.010 60);    /* near-black, warm */
  --ink-1:      oklch(0.12 0.012 60);    /* surface */
  --ink-2:      oklch(0.17 0.012 55);    /* card */
  --ink-3:      oklch(0.26 0.010 55);    /* hairline */

  --paper-0:    oklch(0.96 0.014 70);    /* cream */
  --paper-1:    oklch(0.88 0.018 68);
  --paper-2:    oklch(0.72 0.020 65);    /* muted */
  --paper-3:    oklch(0.55 0.025 60);    /* dim */

  --ember:      oklch(0.78 0.155 50);    /* the one accent — warm amber */
  --ember-soft: oklch(0.78 0.155 50 / 0.14);
  --ember-line: oklch(0.78 0.155 50 / 0.35);

  --bg:    var(--ink-0);
  --fg:    var(--paper-0);
  --muted: var(--paper-2);
  --dim:   var(--paper-3);
  --line:  var(--ink-3);
  --accent: var(--ember);

  /* Type — Fraunces display serif + Inter body + JetBrains Mono labels */
  --font-display: "Fraunces", ui-serif, Georgia, serif;
  --font-body:    "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Fluid type scale — mobile-first, clamped */
  --t-xxs:  clamp(0.70rem, 0.67rem + 0.15vw, 0.78rem);
  --t-xs:   clamp(0.78rem, 0.76rem + 0.15vw, 0.86rem);
  --t-sm:   clamp(0.90rem, 0.87rem + 0.2vw, 1.00rem);
  --t-base: clamp(1.00rem, 0.97rem + 0.25vw, 1.12rem);
  --t-lg:   clamp(1.12rem, 1.06rem + 0.4vw, 1.28rem);
  --t-xl:   clamp(1.35rem, 1.22rem + 0.8vw, 1.75rem);
  --t-2xl:  clamp(1.80rem, 1.52rem + 1.6vw, 2.50rem);
  --t-3xl:  clamp(2.50rem, 2.00rem + 2.8vw, 4.00rem);
  --t-hero: clamp(3.50rem, 2.20rem + 7.5vw, 8.00rem);

  /* Spacing */
  --s-1:  0.25rem;
  --s-2:  0.5rem;
  --s-3:  0.75rem;
  --s-4:  1rem;
  --s-6:  1.5rem;
  --s-8:  2rem;
  --s-10: 2.5rem;
  --s-12: 3rem;
  --s-16: 4rem;
  --s-20: 5rem;
  --s-24: 6rem;
  --s-32: 8rem;
  --s-40: 10rem;

  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 18px;

  --ease:      cubic-bezier(0.22, 1, 0.36, 1);
  --ease-soft: cubic-bezier(0.16, 1, 0.3, 1);

  --max: 78rem;            /* 1248px — mobile/tablet baseline */
  --max-xl: 96rem;         /* 1536px — ≥1440px screens */
  --prose: 38rem;          /* ~608px */
  --prose-xl: 46rem;       /* ~736px on XL */
}

/* Reset */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html, body { height: 100%; }
html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 5rem;
}
body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-body);
  font-size: var(--t-base);
  line-height: 1.6;
  font-feature-settings: "ss01", "cv11";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

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

/* Focus */
:focus-visible {
  outline: 2px solid var(--ember);
  outline-offset: 3px;
  border-radius: 2px;
}

/* Selection */
::selection { background: var(--ember); color: var(--ink-0); }

/* Utility */
.italic { font-style: italic; font-family: var(--font-display); }

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}