/* styles/tokens.css — dark-mode values are authoritative from the shipped iOS app's
   DesignSystem/BrandColor.swift (adaptive dark side), which deliberately diverges from
   docs/brand/cardinal-brand-guidelines.md v1.1 in dark mode; see BrandColor.swift's comment. */
:root {
  --canvas: #050505;
  --surface: #1F1F1F;
  --surface-2: #0D0D0D;
  --surface-3: #0D0D0D;
  --border: #3A3A3A;
  --border-2: #3A3A3A;

  --red: #CC2222;
  --red-hi: #E03030;
  --red-text: #E8303D; /* small red TEXT only — legible on dark; iOS redInk dark */
  --accent-deep: #8A1520; /* iOS accentDeep — pressed/hover state for red buttons */
  --cream: #F5ECD5;
  --on-red: #F5ECD5; /* body text on --red surfaces; >=4.5:1 WCAG AA */

  --gray-light: #CCCCCC;
  --gray-mid: #8A8A8A;

  --green: #22AA66;
  --orange: #CC7700;

  --display: "Archivo Black", "Arial Black", sans-serif;
  --body: "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;

  --gutter: clamp(22px, 5vw, 110px);
  /* Content column cap. Without this, sections stretch to the full viewport on
     wide displays and headline measures run past 2,000px. `--pad-x` centres the
     column by growing the side padding once the viewport exceeds --max-w. */
  --max-w: 1320px;
  --pad-x: max(var(--gutter), calc((100% - var(--max-w)) / 2));
  --measure: 68ch;
}