:root {
  /* ---- Base palette ---- */
  --gold-500: #CA8A04;        /* Primary Gold */
  --gold-600: #B8780A;        /* Primary hover fill */
  --gold-400: #DAA520;        /* Primary border / bright gold */
  --red-800: #991B1B;         /* Secondary Deep Red */
  --red-900: #7F1D1D;         /* Destructive hover fill */
  --red-700: #B91C1C;         /* Destructive border */
  --red-300: #F87171;         /* Error chip text */
  --purple-900: #581C87;      /* Tertiary Royal Purple */
  --green-500: #22C55E;       /* Success */

  --brown-950: #1A0F0A;       /* Page background */
  --brown-900: #2C1A10;       /* Surface default */
  --brown-800: #3D2517;       /* Surface raised / hover */
  --brown-600: #5C3D2E;       /* Default border */
  --parchment: #F5E6D3;       /* Primary text */
  --parchment-dim: #BFA98A;   /* Muted text */

  /* ---- Semantic aliases ---- */
  --color-primary: var(--gold-500);
  --color-primary-hover: var(--gold-600);
  --color-primary-border: var(--gold-400);
  --color-secondary: var(--red-800);
  --color-tertiary: var(--purple-900);

  --color-success: var(--green-500);
  --color-warning: var(--gold-500);
  --color-error: var(--red-800);
  --color-info: var(--purple-900);

  --bg-page: var(--brown-950);
  --surface-default: var(--brown-900);
  --surface-raised: var(--brown-800);
  --surface-hover: var(--brown-800);
  --surface-active: rgba(202, 138, 4, 0.05); /* #CA8A040D */

  --border-default: var(--brown-600);
  --border-subtle: var(--brown-800);
  --border-gold-faint: rgba(202, 138, 4, 0.25); /* #CA8A0440 */

  --text-primary: var(--parchment);
  --text-muted: var(--parchment-dim);
  --text-on-gold: var(--brown-950);
  --text-on-red: var(--parchment);

  /* Tints */
  --tint-success: rgba(34, 197, 94, 0.125);   /* #22C55E20 */
  --tint-warning: rgba(202, 138, 4, 0.125);   /* #CA8A0420 */
  --tint-error: rgba(153, 27, 27, 0.125);     /* #991B1B20 */
  --tint-gold-08: rgba(202, 138, 4, 0.08);    /* #CA8A0415 secondary btn hover */
}