:root{
/* base palette — "Skylight & Gold": navy, teal, gold, warm cream — reconciled to real brand marks (logo, emblem, banner) */
/* NOTE: --green-* names are kept for compatibility with compiled components; values now render as brand navy, not green */
--green-950:#0a1830;
--green-900:#102547;
--green-800:#173562;
--green-700:#1f4a82;
--green-600:#2c5fa0;
--green-500:#3f74b8;

--gold-700:#a9791f;
--gold-600:#c99a3e;
--gold-500:#d9ae52;
--gold-400:#e8c874;
--gold-200:#f3e2b3;

/* NOTE: --terracotta-* names kept for compatibility; values now render as brand teal (from "Wonder" wordmark) */
--terracotta-600:#0f5c58;
--terracotta-500:#177f79;
--terracotta-400:#3fa39c;

/* NOTE: --dusk-* names kept for compatibility; values now render as the banner's daytime sky blue */
--dusk-600:#3f74b8;
--dusk-500:#5f96d4;
--dusk-300:#a8c9ea;

--cream-050:#fbf7ec;
--cream-100:#f8f2e4;
--cream-200:#efe6d2;
--cream-300:#e4d8bd;

--ink-900:#171b22;
--ink-700:#343a44;
--ink-500:#585f6a;
--ink-300:#8a9099;

--white:#fffdf8;

/* semantic aliases */
--surface-page:var(--cream-100);
--surface-page-alt:var(--cream-050);
--surface-card:var(--white);
--surface-card-muted:var(--cream-200);
--surface-inverse:var(--green-900);
--surface-inverse-alt:var(--green-800);

--text-primary:var(--ink-900);
--text-secondary:var(--ink-500);
--text-muted:var(--ink-300);
--text-inverse:var(--cream-050);
--text-inverse-muted:var(--gold-200);

--accent-primary:var(--gold-600);
--accent-primary-hover:var(--gold-700);
--accent-primary-tint:var(--gold-200);
--accent-secondary:var(--terracotta-500);
--accent-secondary-hover:var(--terracotta-600);
--accent-night:var(--dusk-500);

--border-subtle:var(--cream-300);
--border-default:var(--ink-300);
--border-inverse:rgba(248,242,228,0.24);

--focus-ring:var(--gold-500);

--state-success:var(--terracotta-500);
--state-danger:#b5453a;
--state-info:var(--dusk-500);
}