/* ============================================================
   tokens.css — palette, type scale, spacing, motion curves
   ============================================================ */
:root {
  /* Palette (design doc) */
  --black: #242424;
  --gray: #969696;          /* wordmark "Gray", large/decorative text only */
  --gray-text: #767676;     /* small secondary text — AA 4.5:1 on white */
  --white: #ffffff;
  --hairline: rgba(36, 36, 36, 0.14);
  --btn-hover: #333333;

  /* Type: base 14px, ratio 1.25 */
  --font: "Darker Grotesque", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --t-0: 14px;
  --t-1: 17.5px;
  --t-2: 22px;
  --t-3: 27px;
  --t-4: 34px;
  --t-5: 43px;
  --t-6: clamp(40px, 4.6vw, 53px);
  --t-7: clamp(44px, 5.8vw, 67px);
  --t-8: clamp(56px, 7.6vw, 84px);
  --t-hero: clamp(64px, 11.5vw, 148px);

  --lh-body: 1.4;
  --lh-tight: 1.02;
  --measure: 66ch;

  /* Spacing: 8px scale */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 24px;
  --s-6: 32px;
  --s-7: 48px;
  --s-8: 64px;
  --s-9: 96px;

  --margin: 64px;
  --max: 1440px;
  --gutter: max(var(--margin), calc((100% - var(--max)) / 2));
  --nav-h: 112px;
  --radius: 16px;
  --radius-btn: 12px;

  /* Motion */
  --ease-out: cubic-bezier(0.2, 0.7, 0.2, 1);
  --ease-in: cubic-bezier(0.5, 0, 0.9, 0.4);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --spring-bouncy: linear(0, 0.0211, 0.0777, 0.1606, 0.2611, 0.3717, 0.4860, 0.5984, 0.7049, 0.8023, 0.8884, 0.9620, 1.0226, 1.0702, 1.1056, 1.1296, 1.1437, 1.1491, 1.1474, 1.1400, 1.1284, 1.1139, 1.0977, 1.0807, 1.0638, 1.0476, 1.0327, 1.0195, 1.0080, 0.9985, 0.9910, 0.9853, 0.9813, 0.9789, 0.9778, 0.9779, 0.9788, 0.9804, 0.9825, 0.9848, 0.9874, 0.9899, 0.9924, 0.9946, 0.9967, 0.9984, 0.9999, 1.0011, 1);
  --spring-soft: linear(0, 0.0094, 0.0347, 0.0725, 0.1195, 0.1731, 0.231, 0.2913, 0.3524, 0.4131, 0.4724, 0.5294, 0.5837, 0.6347, 0.6822, 0.726, 0.7661, 0.8024, 0.8351, 0.8644, 0.8902, 0.913, 0.9328, 0.9498, 0.9645, 0.9768, 0.9871, 0.9957, 1.0026, 1.008, 1.0123, 1.0155, 1.0178, 1.0193, 1.0201, 1.0205, 1.0204, 1.0199, 1.0192, 1.0183, 1.0172, 1.016, 1.0148, 1.0135, 1.0123, 1.0111, 1.0099, 1.0088, 1);
  /* Cards */
  --card-w: clamp(184px, 17vw, 240px);
  --card-gap: clamp(40px, 9vw, 128px);
  --card-gap-wide: clamp(56px, 14vw, 200px);
  --card-row-gap: clamp(40px, 8vh, 96px);
  --card-hover: 1.05;
  --card-shadow:
    0 1px 2px rgba(0, 0, 0, 0.05),
    0 20px 40px -24px rgba(0, 0, 0, 0.25);
  --card-shadow-hover:
    0 1px 2px rgba(0, 0, 0, 0.05),
    0 28px 56px -24px rgba(0, 0, 0, 0.32);
  --d-fast: 180ms;
  --d-base: 280ms;
  --d-slow: 520ms;
  --d-spring: 589ms;
}

@media (max-width: 720px) {
  :root {
    --margin: 24px;
    --nav-h: 80px;
  }
}