/* ==========================================================================
   Arcrel design tokens
   Values are fixed by .claude/skills/arcrel-brand-skill. Do not invent new
   hexes here. #6119AC is the only primary purple; #8B5CF6 and #7C3AED are
   gradient / hover / glow only. Purple is an accent, never a fill.
   ========================================================================== */

/* One family, one file. Archivo is variable across both axes we use — weight
   400–900 and width 62–125 — so the single download covers every weight on the
   site, from 400 body text to the 900 uppercase headline. It replaces Inter and
   Montserrat, which together were five files and 107 KB.

   The width axis is the reason for the choice: a company called Architected
   Relations can set its display type on a width axis. See .hb__h1. */
@font-face {
  font-family: "Archivo";
  src: url("/assets/fonts/archivo-var.woff2") format("woff2-variations");
  font-weight: 400 900;
  font-stretch: 62% 125%;
  font-style: normal;
  font-display: swap;
}

:root {
  /* --- Brand palette, dark (primary surface) --------------------------- */
  --black: #0a0a0f;
  --card: #141420;
  --white: #ffffff;
  --warm-white: #e8e8f0;
  --muted: #a1a1b5;
  --divider: #2a2a3d;

  --purple: #6119ac;
  --purple-light: #8b5cf6;
  --purple-glow: #7c3aed;

  --red: #ef4444;
  --green: #22c55e;

  /* --- Brand palette, light (document / paper surfaces) ---------------- */
  --paper: #fdfcfb;
  --ink: #15151b;
  --ink-muted: #6a6a77;
  --ink-soft: #8a8a95;
  --line: #e8e8ee;
  --line-2: #efeff3;
  --purple-soft: #d9c9ee;
  --purple-strong: #c5aee3;

  /* --- Type ------------------------------------------------------------ */
  /* Both roles are the same family. The two tokens stay separate because the
     distinction is still meaningful — display type is set heavy and tracked
     tight, body type is not — and because splitting the family again later
     should be a one-line change, not a search across every stylesheet. */
  --font-display: "Archivo", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-body: "Archivo", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  /* The width axis is the reason Archivo was chosen over the alternatives, and
     it is what makes it read as itself rather than as another neutral grotesk.
     Display type sits slightly expanded; body copy stays at normal width,
     because expanding running text costs characters per line and buys nothing.
     Applied via font-stretch so it inherits — see base.css. */
  --wdth-display: 108%;
  --wdth-body: 100%;

  /* Fluid scale, 375px → 1600px viewport.
     Sizes live here; which role uses which step is in assets/css/typography.css
     and documented in DESIGN.md. Nothing outside those two should set a
     font-size in px. */
  --step--2: clamp(0.7rem, 0.68rem + 0.09vw, 0.76rem);
  --step--1: clamp(0.78rem, 0.75rem + 0.13vw, 0.86rem);
  --step-0: clamp(0.98rem, 0.94rem + 0.19vw, 1.09rem);
  --step-1: clamp(1.18rem, 1.1rem + 0.35vw, 1.4rem);
  --step-2: clamp(1.41rem, 1.28rem + 0.58vw, 1.78rem);
  --step-3: clamp(1.69rem, 1.48rem + 0.9vw, 2.27rem);
  --step-4: clamp(2.03rem, 1.71rem + 1.36vw, 2.89rem);
  --step-5: clamp(2.44rem, 1.96rem + 2vw, 3.68rem);
  --step-6: clamp(2.93rem, 2.24rem + 2.9vw, 4.69rem);
  --step-7: clamp(3.51rem, 2.53rem + 4.15vw, 5.97rem);

  /* --- Space (8pt) ----------------------------------------------------- */
  --sp-1: 0.5rem;
  --sp-2: 1rem;
  --sp-3: 1.5rem;
  --sp-4: 2rem;
  --sp-5: 3rem;
  --sp-6: 4rem;
  --sp-7: 6rem;
  --sp-8: 8rem;
  --sp-9: 12rem;

  --section-y: clamp(5rem, 10vw, 11rem);
  --gutter: clamp(1.25rem, 5vw, 4rem);
  --shell: 1240px;
  /* The two H1 roles. Every page uses one or the other — see DESIGN.md.
     Held as tokens rather than literals so no template can invent a third. */
  --h1-hero: clamp(2.6rem, 5.2vw, 4.6rem);
  --h1-article: clamp(2rem, 3.4vw, 3rem);

  --measure: 62ch;

  /* --- Motion ---------------------------------------------------------- */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 180ms;
  --dur: 340ms;
  --dur-slow: 720ms;

  /* --- Chrome ---------------------------------------------------------- */
  --nav-h: 76px;
  --radius: 4px;
  --radius-lg: 10px;
}

@media (max-width: 700px) {
  :root {
    --nav-h: 64px;
  }
}