/* ==========================================================================
   MERITALIEN — design tokens
   One idea: every section is a movement. Origin → destination.
   Nothing here is decorative. Every value is referenced by a component.
   ========================================================================== */

:root {
  /* ---------- surfaces ---------- */
  --ink-900: #0b0b0c;   /* hero, footer */
  --ink-800: #131315;   /* dark bands */
  --ink-700: #1c1c1f;   /* raised on ink */
  --ink-600: #26262a;   /* hairlines on ink */

  --paper-100: #fbfaf8; /* page */
  --paper-200: #f3f1ed; /* alternate band */
  --paper-300: #e9e6e0; /* pressed / inset */

  /* ---------- text ---------- */
  --text: #0b0b0c;
  --text-muted: #5f5b55;      /* warm grey — never neutral. Darkened from #6e6a63:
                                  the lighter value failed WCAG AA (4.5:1) for small text. */
  --text-faint: #6e6a63;      /* one step lighter than muted. Was #9a958c, which
                                  measured 2.85:1 and was unreadable at 11px. */
  --text-invert: #fbfaf8;
  --text-invert-muted: #a8a49c;

  /* ---------- accent: SIGNAL ----------
     Load-bearing. Appears on exactly three things and nowhere else:
       1. the word "borders" in the hero
       2. the globe arcs
       3. the primary CTA
     If it shows up a fourth place, the accent stops meaning "go". */
  --accent: #00e07a;          /* for use on ink surfaces */
  --accent-ink: #00854a;      /* AA-contrast variant for paper surfaces */
  --accent-wash: rgba(0, 224, 122, 0.14);
  --accent-line: rgba(0, 224, 122, 0.34);

  /* ---------- lines ---------- */
  --line: rgba(11, 11, 12, 0.12);
  --line-strong: rgba(11, 11, 12, 0.22);
  --line-invert: rgba(251, 250, 248, 0.14);
  --line-invert-strong: rgba(251, 250, 248, 0.28);

  /* ---------- type ---------- */
  --font-sans: "Geist", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-serif: "Newsreader", Georgia, "Times New Roman", serif;
  --font-mono: "Departure Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* fluid scale — one ratio, no arbitrary sizes */
  --t-display: clamp(2.75rem, 7.4vw, 5.75rem);  /* hero */
  --t-h1:      clamp(2.1rem, 5vw, 3.5rem);
  --t-h2:      clamp(1.75rem, 3.7vw, 2.75rem);  /* serif register */
  --t-h3:      clamp(1.125rem, 1.5vw, 1.375rem);
  --t-lead:    clamp(1.0625rem, 1.45vw, 1.3125rem); /* serif lead */
  --t-body:    1.0625rem;   /* 17px */
  --t-small:   0.875rem;
  --t-mono:    0.78125rem;   /* 12.5px. Was 11px - the eyebrow size, sitewide. */

  --lh-display: 0.98;
  --lh-heading: 1.08;
  --lh-lead: 1.45;
  --lh-body: 1.62;

  --tr-display: -0.035em;   /* Moritz's trick: hard negative tracking */
  --tr-heading: -0.022em;
  --tr-mono: 0.16em;        /* mono wants to breathe */

  /* ---------- space: 4px base, no off-scale values ---------- */
  --s-1: 0.25rem;  --s-2: 0.5rem;   --s-3: 0.75rem;  --s-4: 1rem;
  --s-5: 1.25rem;  --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;

  /* section rhythm */
  --band-y: clamp(2.75rem, 9vw, 8.5rem);  /* min 44px on phones; 9vw
                                                dominates from ~490px up,
                                                so desktop is unchanged. */
  --shell-x: clamp(1.25rem, 4vw, 3rem);
  --shell-max: 76rem;       /* 1216px */

  /* ---------- radii: exactly two ---------- */
  --r-sm: 4px;   /* compact, nav, data */
  --r-lg: 10px;  /* large, media, panels */

  /* ---------- motion: one curve ---------- */
  --ease: cubic-bezier(0.16, 1, 0.3, 1);   /* easeOutExpo — the only curve */
  --dur-fast: 260ms;
  --dur: 420ms;
  --dur-slow: 700ms;

  --shadow-lift: 0 1px 2px rgba(11,11,12,.05), 0 12px 32px -8px rgba(11,11,12,.10);
  --shadow-press: inset 0 1px 2px rgba(11,11,12,.08);
}

/* Reduced motion: kill the theatre, keep the meaning. */
@media (prefers-reduced-motion: reduce) {
  :root { --dur-fast: 1ms; --dur: 1ms; --dur-slow: 1ms; }
}