:root {
  /* Canonical design tokens. Keep global color, radius, shadow, and spacing here. */
  --bg-top: #f6f8fb;
  --bg-bottom: #eef3f8;
  --surface: rgba(255, 255, 255, 0.94);
  --surface-solid: #ffffff;
  --line: #e2e8f0;
  --line-soft: #edf2f7;
  --line-strong: #cbd5e1;
  --text: #0f172a;
  --text-muted: #475569;
  --text-subtle: #64748b;
  --accent: #1d4ed8;
  --accent-strong: #1e40af;
  --accent-soft: #eef4ff;
  --brand: #d71920;
  --brand-soft: #fff1f2;
  --navy: #0f172a;
  --success: #0d7a5f;
  --success-soft: #eafaf4;
  --warning: #d97706;
  --warning-soft: #fff8e6;
  --danger: #dc2626;
  --danger-soft: #fff1f3;

  --radius-xl: 18px;
  --radius-lg: 12px;
  --radius-md: 10px;
  --radius-sm: 8px;
  --radius: var(--radius-md);

  --shadow-lg: 0 20px 44px rgba(15, 23, 42, 0.12), 0 4px 12px rgba(15, 23, 42, 0.06);
  --shadow-md: 0 10px 24px rgba(15, 23, 42, 0.08);
  --shadow-sm: none;
  --shadow: var(--shadow-md);

  --ios-control-height: 44px;
  --mobile-page-gap: 10px;
  --mobile-card-padding: 14px;
  --mobile-card-radius: 16px;
  --mobile-touch-height: 44px;

  /* Compatibility aliases used by older page CSS during the migration. */
  --primary: var(--accent);
  --primary-strong: var(--accent-strong);
  --primary-soft: var(--accent-soft);
  --bg-base: var(--bg-top);
  --bg-soft: var(--surface);
  --bg-soft-2: var(--bg-bottom);
  --bg-elevated: var(--surface-solid);
  --muted: var(--text-muted);
  --bg: var(--bg-top);
  --panel: var(--surface-solid);
}