/*
 * Cataluna Systems design tokens.
 *
 * scripts/check.py reads each "contrast:" line below. It fails when a pair is under
 * 4.5 to 1, the WCAG 2.2 AA minimum for body text. Add a line for every new text and
 * background pair the site uses.
 *
 * contrast: --color-text on --color-background
 * contrast: --color-text on --color-surface
 * contrast: --color-muted on --color-background
 * contrast: --color-muted on --color-surface
 * contrast: --color-accent on --color-background
 * contrast: --color-accent on --color-surface
 * contrast: --color-brand on --color-background
 * contrast: --color-emphasis on --color-background
 * contrast: --color-emphasis on --color-surface
 * contrast: --color-on-brand on --color-brand
 * contrast: --color-inverse-text on --color-inverse-background
 * contrast: --color-inverse-muted on --color-inverse-background
 * contrast: --color-inverse-emphasis on --color-inverse-background
 */
:root {
  /* Color */
  --color-background: #F7F3EA;
  --color-surface: #EEE8DB;
  --color-text: #1C3340;
  --color-muted: #52626A;
  --color-brand: #1F5068;
  --color-on-brand: var(--color-background);
  --color-accent: var(--color-brand);
  --color-focus-ring: var(--color-brand);
  --color-border: #D8D0BF;
  /* The one warm color. Keep it to a few emphasized words, or it stops reading as emphasis. */
  --color-emphasis: #A94A1B;

  /* Color for the one dark section */
  --color-inverse-background: var(--color-text);
  --color-inverse-text: var(--color-background);
  --color-inverse-muted: #C3CED2;
  --color-inverse-emphasis: #E9A26F;

  /* Typography. Each size mixes rem with vw, so it still grows when the reader zooms. */
  --font-heading: "Bricolage Grotesque", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-body: "DM Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-size-small: clamp(0.875rem, 0.85rem + 0.1vw, 0.9375rem);
  --font-size-body: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
  --font-size-lead: clamp(1.125rem, 1.05rem + 0.4vw, 1.375rem);
  --font-size-subheading: clamp(1.25rem, 1.15rem + 0.5vw, 1.5rem);
  --font-size-heading: clamp(1.75rem, 1.2rem + 2.6vw, 3.25rem);
  --font-size-title: clamp(2.75rem, 1.5rem + 5.4vw, 5.25rem);
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-heading: 700;
  --line-height-title: 1;
  --line-height-heading: 1.1;
  --line-height-subheading: 1.3;
  --line-height-body: 1.6;
  --tracking-heading: -0.035em;

  /* Spacing. The number in each name counts steps of 0.25rem. */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-24: 6rem;
  --space-section: clamp(var(--space-16), 2rem + 6vw, var(--space-24));

  /* Shape */
  --radius: 0.5rem;
  --radius-round: 50%;
  --border-width: 1px;
  --border-width-rule: 2px;
  --focus-ring-width: 3px;
  --focus-ring-offset: 3px;
  /* The hero diagram card: a slight tilt and a hard offset shadow, with no blur. */
  --tilt-card: -1.5deg;
  --shadow-card: 7px 7px 0 var(--color-text);

  /* Motion */
  --duration-fast: 120ms;
  --duration-slow: 240ms;

  /* Layout width */
  --width-page: 72rem;
  --width-text: 40rem;
  --width-column: 15rem;
  --width-column-wide: 19rem;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-fast: 0s;
    --duration-slow: 0s;
  }
}