/**
 * Design tokens sampled from the association's logo: the orange of the shield,
 * the red of the maple leaf, the green of the Calgary Tower badge, on warm
 * paper rather than pure white so the artwork does not float on a cold field.
 *
 * Where a colour exists in several steps it is because the saturated one fails
 * contrast as small text. Checked against AA on --paper-50:
 *   gold-600  3.6:1  large text and surfaces only
 *   gold-700  5.3:1  safe for body copy
 *   leaf-600  4.1:1  large text only
 *   leaf-700  6.3:1  safe for body copy
 * The same reason keeps white off the gold buttons — 3.7:1 — so gold surfaces
 * carry ink text instead.
 */
:root {
  --ink-950: #0b1219;
  --ink-900: #14202b;
  --ink-800: #1e2e3c;
  --ink-700: #33475a;
  --ink-500: #5c7183;
  --ink-300: #9daebc;

  --paper-50: #fffcf7;
  --paper-100: #fbf4e9;
  --paper-200: #f3e7d4;
  --paper-300: #e6d4b8;

  --gold-800: #7a470a;
  --gold-700: #9a5b0b;
  --gold-600: #c0720c;
  --gold-500: #e08a14;
  --gold-400: #efa53a;
  --gold-300: #f7c878;
  --gold-100: #fdebcb;

  --maple-800: #8e0a14;
  --maple-700: #b00d1a;
  --maple-600: #c8101e;
  --maple-500: #e00010;
  --maple-300: #f58a90;
  --maple-100: #fddcde;

  --leaf-700: #2f6b1e;
  --leaf-600: #3f8c28;
  --leaf-500: #60b040;
  --leaf-100: #dff2d6;

  /* Semantic — light surfaces */
  --bg: var(--paper-50);
  --surface: #ffffff;
  --surface-sunk: var(--paper-100);
  --text: var(--ink-900);
  --text-soft: var(--ink-700);
  --text-muted: var(--ink-500);
  --line: rgb(20 32 43 / 12%);
  --line-strong: rgb(20 32 43 / 22%);
  --accent: var(--gold-700);

  --shadow-sm: 0 1px 2px rgb(11 18 25 / 6%), 0 2px 8px rgb(11 18 25 / 4%);
  --shadow-md: 0 2px 4px rgb(11 18 25 / 6%), 0 12px 28px rgb(11 18 25 / 8%);
  --shadow-lg: 0 4px 8px rgb(11 18 25 / 8%), 0 24px 56px rgb(11 18 25 / 14%);

  --radius-sm: 0.625rem;
  --radius: 1rem;
  --radius-lg: 1.5rem;
  --radius-pill: 999px;

  --wrap: 72rem;
  --wrap-narrow: 44rem;
  --gutter: clamp(1.125rem, 4vw, 2.5rem);
  --section-y: clamp(3.5rem, 8vw, 7rem);

  --font-display: "Bricolage Grotesque", "Trebuchet MS", system-ui, sans-serif;
  --font-body:
    Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;

  --step--1: clamp(0.82rem, 0.79rem + 0.15vw, 0.9rem);
  --step-0: clamp(1rem, 0.96rem + 0.2vw, 1.09rem);
  --step-1: clamp(1.15rem, 1.08rem + 0.35vw, 1.35rem);
  --step-2: clamp(1.4rem, 1.26rem + 0.7vw, 1.85rem);
  --step-3: clamp(1.75rem, 1.5rem + 1.25vw, 2.6rem);
  --step-4: clamp(2.1rem, 1.65rem + 2.25vw, 3.6rem);

  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/**
 * Dark bands reuse the same names, so a component never has to know which kind
 * of section it landed in.
 */
.on-ink {
  --bg: var(--ink-950);
  --surface: rgb(255 255 255 / 6%);
  --surface-sunk: rgb(255 255 255 / 3%);
  --text: var(--paper-100);
  --text-soft: var(--paper-200);
  --text-muted: var(--ink-300);
  --line: rgb(255 255 255 / 14%);
  --line-strong: rgb(255 255 255 / 26%);
  --accent: var(--gold-300);

  background: var(--bg);
  color: var(--text);
}