:root {
  /* Breakpoint contract (reference only; media queries still use literals). */
  --bp-xs-max: 360px;
  --bp-sm-max: 767px;
  --bp-sm-min: 768px;
  --bp-md-max: 1023px;
  --bp-lg-min: 1024px;

  --font-sans: "Plus Jakarta Sans", system-ui, sans-serif;
  --font-serif: "DM Serif Display", serif;
  --brand-primary: hsl(36 80% 50%);
  --brand-primary-strong: hsl(36 80% 45%);
  --brand-a04: hsl(36 80% 50% / 0.04);
  --brand-a05: hsl(36 80% 50% / 0.05);
  --brand-a06: hsl(36 80% 50% / 0.06);
  --brand-a08: hsl(36 80% 50% / 0.08);
  --brand-a09: hsl(36 80% 50% / 0.09);
  --brand-a10: hsl(36 80% 50% / 0.1);
  --brand-a12: hsl(36 80% 50% / 0.12);
  --brand-a14: hsl(36 80% 50% / 0.14);
  --brand-a15: hsl(36 80% 50% / 0.15);
  --brand-a16: hsl(36 80% 50% / 0.16);
  --brand-a18: hsl(36 80% 50% / 0.18);
  --brand-a20: hsl(36 80% 50% / 0.2);
  --brand-a24: hsl(36 80% 50% / 0.24);
  --brand-a25: hsl(36 80% 50% / 0.25);
  --brand-a26: hsl(36 80% 50% / 0.26);
  --brand-a28: hsl(36 80% 50% / 0.28);
  --brand-a30: hsl(36 80% 50% / 0.3);
  --brand-a32: hsl(36 80% 50% / 0.32);
  --brand-a35: hsl(36 80% 50% / 0.35);
  --brand-a40: hsl(36 80% 50% / 0.4);
  --brand-a45: hsl(36 80% 50% / 0.45);
  --brand-a48: hsl(36 80% 50% / 0.48);
  --brand-a55: hsl(36 80% 50% / 0.55);
  --brand-a65: hsl(36 80% 50% / 0.65);
  --brand-a90: hsl(36 80% 50% / 0.9);
  --on-primary: #ffffff;
  --ink-900: hsl(220 30% 15%);
  --cream-50: hsl(40 33% 97%);
  --surface-dark: hsl(220 25% 20%);
  --on-surface-dark: hsl(40 33% 97%);
  --text-muted: hsl(220 15% 45%);
  --muted-fg: var(--text-muted);
  --accent-soft: hsl(36 60% 92%);
  --accent-soft-fg: hsl(36 80% 35%);
  --border-soft: hsl(40 15% 88%);
  --border: var(--border-soft);
  --text: #1a2433;
  --muted: #516072;
  --accent: var(--brand-primary);
  --accent-strong: var(--brand-primary-strong);
  --radius-md: 12px;
  --radius: var(--radius-md);
  --shadow-soft-token: 0 2px 20px hsl(220 30% 15% / 0.06);
  --shadow-elevated-token: 0 12px 36px hsl(220 30% 15% / 0.11);
  --shadow-card: var(--shadow-soft-token);
  --shadow-warm: 0 4px 30px var(--brand-a12);
  --shadow-warm-strong: 0 6px 35px var(--brand-a20);
  --btn-primary-action-shadow: 0 10px 20px var(--brand-a20);
  --btn-primary-action-shadow-hover: 0 14px 28px var(--brand-a25);
  --shadow-soft: var(--shadow-soft-token);
  --shadow-elevated: var(--shadow-elevated-token);
  --card-radius: 1rem;
  --card-surface-bg: #ffffff;
}