/* Noira design tokens — black on white, one sans family (Hanken Grotesk 400) at two extreme scales, one quiet brand slot.
   Fonts: <link href="https://fonts.googleapis.com/css2?family=Hanken+Grotesk:wght@400;500&display=swap" rel="stylesheet"> */
:root {
  /* ── Surfaces (fixed neutrals; the palette engine re-tints them per build) ── */
  --bg: #FFFFFF; --surface: #F4F4F4; --surface-2: #ECECEC; --paper: #FFFFFF;
  --night: #070707; --night-2: #141414; --night-3: #1F1F1F;

  /* ── Text ── */
  --text: #0A0A0A; --text-2: #3A3A3A; --muted: #707070; --ghost: #B5B5B5;
  --on-night: #FFFFFF; --on-night-2: #D6D6D6; --night-muted: #9A9A9A; --night-ghost: #7A7A7A;

  /* ── Lines ── */
  --line: #E4E4E4; --line-2: #C9C9C9; --line-ink: #0A0A0A;
  --night-line: rgba(255, 255, 255, .16); --night-line-2: rgba(255, 255, 255, .32);

  /* ── Brand slot (palette engine): the only colour on the page — links, marks, the current-page dot. Never a fill. ── */
  --accent: #A8553A; --accent-rgb: 168, 85, 58; --accent-soft: #F3E6E0; --on-accent: #FFFFFF;
  --accent-ink: #A8553A;           /* text-safe on white (5.0:1) */
  --accent-on-dark: #D98B6B;       /* text-safe on near-black (7.6:1) */

  /* ── Data / status (forms + mock-ups only) ── */
  --success: #2E7D4F; --warning: #B7791F; --danger: #C0392B; --info: #2F6FB3;

  /* ── Fonts ── */
  --font: "Hanken Grotesk", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-display: "Hanken Grotesk", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-statement: "Hanken Grotesk", "Helvetica Neue", Helvetica, Arial, sans-serif;   /* the statement voice: huge lines, the intro, numbers, labels */
  --mono: ui-monospace, "SF Mono", Menlo, monospace;

  /* ── Radii: the design is square. Only the view-switch pill and avatars are round. ── */
  --r-sm: 0px; --r: 0px; --r-lg: 2px; --r-pill: 9999px;

  /* ── Spacing / layout: 24px gutters on a 16-column grid, no max-width; sections 120px apart ── */
  --gutter: 24px; --container: 1920px; --col-gap: 16px;
  --section: 120px; --section-tight: 90px; --head-gap: 24px; --head-to-content: 72px;
  --nav-h: 64px;

  /* ── Shadows: none in the design; the floating view-switch pill is the one exception ── */
  --shadow-1: 0 2px 10px rgba(0, 0, 0, .10); --shadow-2: 0 10px 30px rgba(0, 0, 0, .14);

  /* ── Motion ── */
  --ease: cubic-bezier(.25, .46, .45, .94); --ease-out: cubic-bezier(.16, 1, .3, 1);
  --dur: .6s; --dur-fast: .35s; --dur-slow: 1.2s;
}

/* ── Type scale (desktop; phone sizes in noira.css → Responsive) ──
   Two voices, one weight (400). Big or tiny, almost nothing in between. */
.t-giant   { font-family: var(--font-statement); font-size: 112px; line-height: 1; letter-spacing: -.04em; font-weight: 400; text-wrap: balance; }   /* statement opening statement (hero H1) */
.t-state   { font-family: var(--font-display); font-size: 120px; line-height: 1; letter-spacing: -.035em; font-weight: 400; text-wrap: balance; } /* sans statement (one per page) */
.t-big     { font-family: var(--font-statement); font-size: 76px; line-height: 1.02; letter-spacing: -.035em; font-weight: 400; text-wrap: balance; }   /* statement section statement */
.t-h1      { font-family: var(--font-display); font-size: 64px; line-height: 1.02; letter-spacing: -.03em; font-weight: 400; text-wrap: balance; }  /* page / project title */
.t-h2      { font-family: var(--font-display); font-size: 48px; line-height: 1.05; letter-spacing: -.025em; font-weight: 400; text-wrap: balance; } /* section title */
.t-h3      { font-family: var(--font-display); font-size: 24px; line-height: 1.1; letter-spacing: -.015em; font-weight: 400; text-wrap: balance; }
.t-stat    { font-family: var(--font-statement); font-size: 84px; line-height: 1; letter-spacing: -.04em; font-weight: 400; }                       /* numbers */
.t-intro   { font-family: var(--font-statement); font-size: 30px; line-height: 1.3; letter-spacing: -.02em; font-weight: 400; }                      /* statement paragraph */
.t-quote   { font-family: var(--font-statement); font-size: 40px; line-height: 1.1; letter-spacing: -.025em; font-weight: 400; }                      /* contact details, pull lines */
.t-lead    { font-family: var(--font); font-size: 18px; line-height: 1.4; }
.t-body    { font-family: var(--font); font-size: 15px; line-height: 1.5; }
.t-small   { font-family: var(--font); font-size: 14px; line-height: 1.4; letter-spacing: -.01em; }                                               /* tables, facts, captions */
.t-ui      { font-family: var(--font); font-size: 12px; line-height: 1.25; letter-spacing: -.01em; }                                              /* nav, footer links */
.t-label   { font-family: var(--font); font-size: 13px; line-height: 1.3; font-weight: 400; color: var(--muted); }                          /* statement micro-label */

/* ── Motion off: reduced motion + ?static (the JS adds .static to <html>) ── */
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; } }
.static *, .static *::before, .static *::after { transition: none !important; animation: none !important; }