/* Kite tokens — mapped from DESIGN.md (white cathedral, one blue thread) */
:root {
  /* colour */
  --c-ink: #1d1d1f;
  --c-mid: #707070;
  --c-deep: #474747;
  --c-hair: #d6d6d6;
  --c-canvas: #f5f5f7;
  --c-paper: #ffffff;
  --c-wash: #e8e8ed;
  --c-faded: #fafafc;
  --c-dot: #777779;
  /* Kite Vermilion — the brand's one accent (warm counterweight to the cool pastel finishes) */
  --c-accent: #d63d1f;        /* filled CTA, selection, focus; white text 4.62:1 */
  --c-accent-hover: #c2381f;
  --c-accent-ink: #b8321a;    /* text links and "New" on white, 5.98:1 */
  --c-accent-tint: #fbe9e4;   /* quiet accent field (battery track) */

  /* product finishes — colour lives in the product only */
  --c-sky: #c8d8e0;
  --c-citrus: #dddc8c;
  --c-starlight: #f0e4d3;
  --c-silver: #e3e4e5;
  --c-blush: #e8d0d0;
  --c-indigo: #596680;
  --c-midnight: #2e3642;

  /* type */
  --f-display: "SF Pro Display", "Inter", system-ui, -apple-system, sans-serif;
  --f-text: "SF Pro Text", "Inter", system-ui, -apple-system, sans-serif;
  --t-micro: 12px;
  --t-caption: 14px;
  --t-body-sm: 17px;
  --t-body: 21px;
  --t-body-lg: 28px;
  --t-sub: 32px;
  --t-heading-sm: 40px;
  --t-heading: clamp(40px, 5vw, 56px);
  --t-heading-lg: clamp(48px, 6.4vw, 80px);
  --t-display: clamp(56px, 8vw, 96px);
  --tr-display: -0.015em;
  --tr-body: -0.022em;

  /* space */
  --s-4: 4px; --s-8: 8px; --s-12: 12px; --s-16: 16px; --s-20: 20px; --s-24: 24px;
  --s-28: 28px; --s-32: 32px; --s-40: 40px; --s-48: 48px; --s-76: 76px; --s-80: 80px;
  --s-120: 120px; --s-144: 144px;
  --page: 1200px;
  --gutter: clamp(20px, 4vw, 40px);
  --band: clamp(80px, 10vw, 120px);

  /* shape */
  --r-card: 28px;
  --r-link: 10px;
  --r-pill: 980px;

  /* motion */
  --ease: cubic-bezier(0.25, 0.1, 0.25, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}