:root {
  /* Surfaces — warm charcoal steel */
  --wt-base: #131310;      /* page background */
  --wt-panel: #1c1a14;     /* raised panel / header gradient end */
  --wt-card: #232017;      /* steel content card */
  --wt-card-ink: #191712;  /* near-black tooltip/stat card */
  --wt-footer: #17150f;    /* footer */
  --wt-hairline: rgba(239,228,201,0.16);

  /* Paper — cream, for forms & CTAs */
  --wt-paper: #efe4c9;
  --wt-paper-2: #f7f0dc;
  --wt-ink: #1c1a14;       /* text on paper */
  --wt-ink-soft: #4a4335;

  /* Text on dark */
  --wt-text: #efe4c9;
  --wt-text-soft: #d9d0b6;
  --wt-text-muted: #bdb49b;
  --wt-text-dim: #8a8069;

  /* Phoenix sunset accent (hard-banded) */
  --wt-ember: #e04f2a;
  --wt-flame: #ef8f13;
  --wt-amber: #f5a11c;
  --wt-gold: #f2c94c;

  /* Action */
  --wt-action: #1f8a4c;
  --wt-action-hover: #27995a;

  /* Semantic aliases */
  --surface-page: var(--wt-base);
  --surface-card: var(--wt-card);
  --text-body: var(--wt-text-muted);
  --text-heading: var(--wt-text);
  --accent: var(--wt-amber);
  --action: var(--wt-action);

  /* The phoenix stripe gradient */
  --wt-stripe-h: linear-gradient(90deg, #e04f2a 0 28%, #ef8f13 28% 56%, #f5a11c 56% 80%, #f2c94c 80%);
  --wt-stripe-v: linear-gradient(180deg, #e04f2a 0 28%, #ef8f13 28% 56%, #f5a11c 56% 80%, #f2c94c 80%);
}