/* goodscompany.io — design tokens
 *
 * The single source of truth for the site's visual vocabulary.
 * Pages link this file and keep only page-level CSS inline.
 *
 * Rules
 * - A page never redefines a token. Extend here, then use there.
 * - Every token in this file is used by at least one page.
 *   Unused vocabulary was removed on consolidation (2026-09-14).
 * - Values are spelled with spaces inside rgba() so diffs stay quiet.
 */

:root {
  /* ─── Color primitives ─────────────────────────────── */
  --color-cream: #FFFDF0;
  --color-ink: #0c0a08;                     /* deep warm dark */
  --color-ink-2: #14110d;                   /* hero gradient bottom */
  --color-ink-3: #000000;                   /* pure black — text outside hero */
  --color-orange: #DE733C;
  --color-orange-deep: #C75F2A;
  --color-white: #FFFFFF;

  /* ─── Color semantic — surfaces ─────────────────────── */
  --color-bg: var(--color-cream);
  --color-bg-dark: var(--color-ink);
  --color-glass-cream: rgba(255, 253, 240, 0.85);   /* scrolled header */

  /* ─── Color semantic — text ─────────────────────────── */
  /* Greys stay alpha so they adapt to the surface under them. Every tier
   * clears WCAG AA (4.5:1) on cream: quiet 6.2, muted 5.3, faint 4.7:1;
   * on ink, on-dark q/m/f 9.5 / 5.2 / 4.9:1. Muted (.50) and faint (.35)
   * and on-dark faint (.35) failed until 2026-10-17 (Brent, GoodsMarketing
   * #31); the Goods deck tokens use the same values. */
  --color-text: var(--color-ink-3);
  --color-text-quiet: rgba(0, 0, 0, 0.62);
  --color-text-muted: rgba(0, 0, 0, 0.58);
  --color-text-faint: rgba(0, 0, 0, 0.55);
  --color-text-on-dark: var(--color-cream);
  --color-text-on-dark-q: rgba(255, 253, 240, 0.7);
  --color-text-on-dark-m: rgba(255, 253, 240, 0.5);
  --color-text-on-dark-f: rgba(255, 253, 240, 0.48);

  /* ─── Color semantic — borders ──────────────────────── */
  --color-border: rgba(0, 0, 0, 0.12);
  --color-border-strong: rgba(0, 0, 0, 0.4);
  --color-border-on-dark: rgba(255, 253, 240, 0.06);
  --color-border-on-dark-2: rgba(255, 253, 240, 0.2);

  /* ─── Motion ─────────────────────────────────────────── */
  --time-micro: 0.18s;                      /* hover, opacity */
  --time-short: 0.3s;                       /* filters, header switch */
  --time-medium: 0.55s;                     /* viewport reveals */
  --ease-out: cubic-bezier(0.2, 0, 0, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

  /* ─── Type — families ────────────────────────────────── */
  --font-display: 'Poppins', sans-serif;
  --font-body: 'Hind', sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  /* ─── Type — scale ───────────────────────────────────── */
  --type-h1-hero: clamp(36px, 6.4vw, 104px);   /* homepage hero only */
  --type-h1: clamp(36px, 5.6vw, 84px);         /* every other page hero */
  --type-numeral: clamp(80px, 22vw, 280px);    /* sprint numerals */
  --type-h2-xl: clamp(40px, 5.2vw, 80px);      /* manifesto signature */
  --type-h2-l: clamp(36px, 4vw, 60px);         /* section heading */
  --type-h2-m: clamp(32px, 3.8vw, 60px);       /* testimonial quote */
  --type-h2-s: clamp(28px, 3.2vw, 44px);       /* newsletter, form heading */
  --type-quote-l: clamp(22px, 2.4vw, 30px);    /* founders pull-quote */
  --type-h3: clamp(22px, 2.2vw, 32px);         /* card / venture title */
  --type-body-l: 17px;
  --type-body: 16px;
  --type-eyebrow: 11px;
  --type-cta: 12px;

  /* ─── Type — tracking ────────────────────────────────── */
  --tracking-tight: -0.02em;
  --tracking-loose: -0.01em;
  --tracking-eyebrow: 0.18em;
  --tracking-button: 0.06em;
  --tracking-link: 0.04em;

  /* ─── Type — leading ─────────────────────────────────── */
  --lh-display: 1.05;
  --lh-h2: 1.08;
  --lh-quote: 1.22;
  --lh-reading: 1.55;
  --lh-loose: 1.65;

  /* ─── Radius ─────────────────────────────────────────── */
  --radius-default: 2px;
  --radius-button: 4px;
  --radius-card: 12px;
  --radius-pill: 100px;
  --radius-circle: 50%;

  /* ─── Elevation ──────────────────────────────────────── */
  --shadow-glass-cream: 0 1px 0 rgba(0, 0, 0, 0.06);   /* scrolled header hairline */
}