/* Ticket Del Mundo — color system.
   Row 1: the five measured brand colors, kept literal as "brand ink" values.
   Row 2: the corporate working palette. The measured colors are high-chroma and
   go muddy at large sizes, so surfaces use a warm low-chroma neutral ramp built on
   the espresso hue (~35deg) and accents are re-tuned for AA contrast on paper. */
:root {
  /* --- Brand (literal, from artwork) --- */
  --brand-parchment: #f6db98;
  --brand-tan: #e0c070;
  --brand-sienna: #9a5217;
  --brand-espresso: #402000;
  --brand-sage: #4b6558;

  /* --- Warm neutral ramp (surfaces, text, borders) --- */
  --warm-25: #fdfbf7;
  --warm-50: #faf6ee;
  --warm-100: #f4eee1;
  --warm-200: #e8dfcd;
  --warm-300: #d6c9b1;
  --warm-400: #b3a58c;
  --warm-500: #8b7f68;
  --warm-600: #6b6153;
  --warm-700: #4c443a;
  --warm-800: #2f2a23;
  --warm-900: #1d1913;
  --warm-950: #120f0a;

  /* --- Sienna: primary action --- */
  --sienna-50: #fdf1e6;
  --sienna-100: #f8ddc2;
  --sienna-200: #edb987;
  --sienna-300: #d9924f;
  --sienna-400: #bb6f28;
  --sienna-500: #9a5217;
  --sienna-600: #833f12;
  --sienna-700: #67300e;
  --sienna-800: #4a220a;

  /* --- Sage: secondary / calm --- */
  --sage-50: #eef2f0;
  --sage-100: #dae3de;
  --sage-200: #b3c4bb;
  --sage-300: #86a094;
  --sage-400: #5f7f70;
  --sage-500: #4b6558;
  --sage-600: #3c5247;
  --sage-700: #2c3c34;

  /* --- Gold: prices, badges, highlight (saturated tan) --- */
  --gold-100: #fdf0cc;
  --gold-200: #f6db98;
  --gold-300: #e6bd5c;
  --gold-400: #cf9e28;
  --gold-500: #a97d17;

  /* --- Teal: complementary to sienna; links, info, data --- */
  --teal-100: #d6ecec;
  --teal-300: #4a9aa0;
  --teal-500: #155e63;
  --teal-600: #0f4a4e;

  /* --- Semantic hues --- */
  --green-500: #1e7a4c;
  --green-100: #dcefe4;
  --amber-500: #b26a00;
  --amber-100: #fbeccd;
  --red-500: #b3261e;
  --red-100: #fadedc;
  --whatsapp: #25d366;

  /* --- Semantic aliases: surfaces --- */
  --surface-page: var(--warm-50);
  --surface-page-alt: var(--warm-100);
  --surface-card: #ffffff;
  --surface-sunken: var(--warm-100);
  --surface-inverse: var(--warm-900);
  --surface-brand: var(--sienna-500);
  --surface-brand-soft: var(--sienna-50);
  --surface-accent-soft: var(--sage-50);
  --surface-ticket: var(--brand-parchment);
  --surface-overlay: rgba(18, 15, 10, 0.56);

  /* --- Semantic aliases: text --- */
  --text-heading: var(--warm-900);
  --text-body: var(--warm-800);
  --text-muted: var(--warm-600);
  --text-subtle: var(--warm-500);
  --text-on-brand: #fff8ec;
  --text-on-inverse: var(--warm-100);
  --text-brand: var(--sienna-600);
  --text-link: var(--teal-500);
  --text-link-hover: var(--sienna-600);
  --text-price: var(--warm-900);

  /* --- Semantic aliases: borders --- */
  --border-subtle: var(--warm-200);
  --border-default: var(--warm-300);
  --border-strong: var(--warm-400);
  --border-brand: var(--sienna-500);
  --border-inverse: rgba(246, 219, 152, 0.24);
  --focus-ring: var(--teal-500);

  /* --- Semantic aliases: status --- */
  --status-success-fg: var(--green-500);
  --status-success-bg: var(--green-100);
  --status-warning-fg: var(--amber-500);
  --status-warning-bg: var(--amber-100);
  --status-danger-fg: var(--red-500);
  --status-danger-bg: var(--red-100);
  --status-info-fg: var(--teal-500);
  --status-info-bg: var(--teal-100);
}

/* Dark surface scope — used for footers, matchday/live views, app dark mode. */
.tdm-dark {
  --surface-page: var(--warm-950);
  --surface-page-alt: var(--warm-900);
  --surface-card: #1c1811;
  --surface-sunken: #17130e;
  --surface-inverse: var(--warm-50);
  --surface-brand-soft: rgba(154, 82, 23, 0.22);
  --surface-accent-soft: rgba(75, 101, 88, 0.24);
  --text-heading: var(--warm-50);
  --text-body: var(--warm-200);
  --text-muted: var(--warm-400);
  --text-subtle: var(--warm-500);
  --text-brand: var(--gold-200);
  --text-link: var(--gold-300);
  --text-link-hover: var(--gold-200);
  --text-price: var(--warm-50);
  --border-subtle: rgba(246, 219, 152, 0.14);
  --border-default: rgba(246, 219, 152, 0.22);
  --border-strong: rgba(246, 219, 152, 0.34);
  --focus-ring: var(--gold-300);
}