/* ============================================================
   Design tokens — single source of truth for the whole site.
   Monochrome system + one accent. To change the CTA color,
   edit --color-accent only.
   ============================================================ */
:root {
  /* Color */
  --color-accent: #0071E3;       /* the only color: fills, stripes, underlines, focus rings */
  --color-accent-text: #0060C0;  /* the same blue, one step darker, for small blue text (passes WCAG AA) */
  --color-paper: #F4F4F6;        /* page background: soft gray */
  --color-surface: #FFFFFF;      /* cards and widgets on the gray page */
  --color-surface-2: #E3E3E6;    /* deeper gray for nested panels */
  --color-ink: #1D1D1F;          /* primary text */
  --color-ink-2: #5C5C61;        /* secondary text on light backgrounds (AA on every light gray) */
  --color-ink-3: #98989D;        /* labels on dark backgrounds only */
  --color-line: #C4C4CA;         /* hairlines */
  --color-black: #161618;        /* dark sections: graphite gray */
  --color-graphite-2: #232326;   /* panels on dark */
  --color-tile: #111111;         /* tiles and the main button's arrow block */
  --color-panel: #F7F7F8;        /* near-white tile slider and main button */

  /* Type */
  --font-display: "Sora", "Geist", "Helvetica Neue", Arial, sans-serif;  /* titles */
  --font-body: "Geist", "SF Pro Text", "Helvetica Neue", Arial, sans-serif;  /* text, labels, buttons */
  --text-xs: 0.8125rem;
  --text-card: 0.875rem;        /* 14px: About card text and labels */
  --text-sm: 0.9375rem;
  --text-md: 1.0625rem;
  --text-lg: 1.3125rem;
  --text-xl: 1.75rem;
  --text-2xl: clamp(2.125rem, 4.5vw, 3.25rem);
  --text-3xl: clamp(2.75rem, 7vw, 5rem);
  --leading-tight: 1.05;
  --leading-body: 1.55;

  /* Space (4px base) */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4.5rem;
  --space-9: 7rem;

  /* Shape — quieter corners, no heavy shadows */
  --radius-sm: 6px;
  --radius-btn: 4px;             /* buttons: main CTA and secondary */
  --radius-tile: 10px;           /* tiles (the portrait has square corners) */
  --radius-md: 12px;
  --radius-pill: 999px;

  /* Layout */
  --page-max: 1200px;
  --measure: 64ch;
  --gutter: clamp(1.25rem, 4vw, 2.5rem);

  /* Motion */
  --ease: cubic-bezier(0.25, 0.1, 0.25, 1);
  --dur-flip: 800ms;
}