/* Design tokens — the single source of truth for color, type and space.
   Mirrors docs/design.md (Nordic, anti-slop). Layered on top of OpenProps,
   which is loaded before this file. */

:root {
  /* Palette — Nordic landscape tones + one warm copper signal. */
  --ink: #14202b;
  --slate: #3a4a55;
  --spruce: #244a3b;
  --spruce-soft: #3c6b57;
  --sage: #8fa89b;
  --copper: #b5613a;
  --copper-soft: #c9784f;
  --stone: #eceeea;
  --paper: #fbfcfb;
  --line: #d7dbd5;

  /* Semantic roles. */
  --bg: var(--stone);
  --surface: var(--paper);
  --text: var(--ink);
  --text-muted: var(--slate);
  --brand: var(--spruce);
  --accent: var(--copper);
  --border: var(--line);

  /* Type. */
  --font-display: "Fraunces", Georgia, "Times New Roman", serif;
  --font-body: "Hanken Grotesk", system-ui, -apple-system, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", monospace;

  /* Type scale (~1.25 major third). */
  --step--1: 0.833rem;
  --step-0: 1rem;
  --step-1: 1.25rem;
  --step-2: 1.563rem;
  --step-3: 1.953rem;
  --step-4: 2.441rem;
  --step-5: 3.052rem;

  --measure: 65ch;
  --measure-tight: 52ch;
  --container: 72rem;

  /* Shape — one radius scale, applied consistently (design.md shape lock).
     Rule: interactive controls + cards use --radius; pills use --radius-pill. */
  --radius-sm: 4px;
  --radius: 6px;
  --radius-lg: 12px;
  --radius-pill: 999px;

  /* Motion — calm by default; all gated by prefers-reduced-motion in base.css. */
  --dur-1: 120ms;
  --dur-2: 200ms;
  --dur-3: 320ms;
  --ease-out: cubic-bezier(0.2, 0.7, 0.2, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);

  /* Elevation — shadows tinted to the ink hue, never pure black. */
  --shadow-1: 0 1px 2px rgba(20, 32, 43, 0.06), 0 1px 1px rgba(20, 32, 43, 0.04);
  --shadow-2: 0 4px 12px rgba(20, 32, 43, 0.08), 0 2px 4px rgba(20, 32, 43, 0.05);
  --shadow-3: 0 16px 40px rgba(20, 32, 43, 0.14), 0 4px 12px rgba(20, 32, 43, 0.08);

  /* Vertical rhythm — section spacing scales with the viewport. */
  --section-y: clamp(3rem, 7vw, 6rem);
  --band-gap: clamp(2rem, 4vw, 3.5rem);

  /* Icon sizing. */
  --icon: 1.25em;
}

/* State color-coding for availability (never color alone). */
:root {
  --state-available: var(--spruce);
  --state-taken: #9a4040;
  --state-premium: var(--copper);

  /* Soft tints for alert/banner backgrounds (kept very light for AA text). */
  --tint-success: #e6efe9;
  --tint-danger: #f6e7e3;
  --tint-warning: #f3ecdd;
  --tint-info: #e7edf0;
  --text-success: #1f4633;
  --text-danger: #7a3a22;
  --text-warning: #6b531c;
  --text-info: #294552;
}

/* Dark-context roles — for inverted sections (hero, dark bands, footer accents).
   One theme per page; these recolor *sections*, not the whole document. */
:root {
  --bg-dark: var(--ink);
  --surface-dark: #1b2c39;
  --text-on-dark: var(--paper);
  --muted-on-dark: var(--sage);
  --border-dark: rgba(236, 238, 234, 0.14);
}