:root {
  /* Base palette — exact values from the supplied brand.css */
  --background: #090b14;      /* midnight — the default ground for everything */
  --surface: #11121a;         /* one step up from ground; panels, sticky nav fill */
  --foreground: #f2ebdd;      /* warm bone, never pure white */
  --muted-foreground: #a8a094;/* metadata, captions, secondary nav */
  --border: #393127;          /* aged-gold hairline at rest */
  --primary: #b99a59;         /* aged gold — the single accent */
  --primary-foreground: #090b14;
  --burgundy: #702642;
  --cobalt: #173eb8;
  --magenta: #b82d78;

  /* Derived neutrals (mixed from the base palette, not invented hues) */
  --background-deep: #05060c;   /* footer / oversized wordmark ground */
  --surface-raised: #171823;    /* hover fill on list rows and tiles */
  --overlay-scrim: rgba(9, 11, 20, .72);
  --overlay-veil: rgba(9, 11, 20, .35);
  --primary-soft: rgba(185, 154, 89, .16);
  --primary-hairline: rgba(185, 154, 89, .38);
  --foreground-hairline: rgba(242, 235, 221, .22);

  /* Semantic aliases — prefer these in components */
  --text-primary: var(--foreground);
  --text-muted: var(--muted-foreground);
  --text-accent: var(--primary);
  --text-on-accent: var(--primary-foreground);
  --surface-page: var(--background);
  --surface-panel: var(--surface);
  --surface-panel-hover: var(--surface-raised);
  --surface-footer: var(--background-deep);
  --border-hairline: var(--border);
  --border-strong: var(--primary-hairline);
  --focus-ring: var(--primary);

  /* Editorial / poster accents. Used in imagery, plate washes and category marks —
     never as UI fills for text surfaces. */
  --accent-burgundy: var(--burgundy);
  --accent-cobalt: var(--cobalt);
  --accent-magenta: var(--magenta);
}