/* ============================================================
   LatinoTV — COLOR TOKENS
   Brand green is the most visible color on every page.
   Light mode is mandatory in body content; never dark bg.
   ============================================================ */
:root {
  /* ---- Brand green (primary action: CTAs, active states, accents, badges) ---- */
  --green-500: #1DB800;            /* primary brand green */
  --green-400: #2ED900;            /* hover / brighter */
  --green-subtle: rgba(29, 184, 0, 0.08); /* tint backgrounds */
  --green-border: rgba(29, 184, 0, 0.35);  /* hover borders */

  /* ---- Dark evergreen (ONLY top bar, header/navbar, footer) ---- */
  --evergreen-900: #0F1A0F;

  /* ---- Body backgrounds (alternate per section) ---- */
  --bg-base: #FFFFFF;
  --bg-alt: #F8F8F8;

  /* ---- Accents ---- */
  --gold-500: #F5A623;             /* Gold sponsor tier + tour highlights ONLY */
  --gold-bg: #FFFDF5;              /* warm bg for gold sponsor cards */
  --red-500: #E53935;              /* urgency, sold out, music category */

  /* ---- Text ---- */
  --text-primary: #111111;
  --text-secondary: #4A4A4A;
  --text-muted: #8A8A8A;
  --text-on-dark: #FFFFFF;
  --text-on-green: #FFFFFF;

  /* ---- Borders ---- */
  --border-light: rgba(0, 0, 0, 0.07);
  --border-hover: rgba(29, 184, 0, 0.35);

  /* ============================================================
     SEMANTIC ALIASES — reference these in components
     ============================================================ */
  --color-primary: var(--green-500);
  --color-primary-hover: var(--green-400);
  --color-primary-tint: var(--green-subtle);

  --surface-page: var(--bg-base);
  --surface-page-alt: var(--bg-alt);
  --surface-card: #FFFFFF;
  --surface-header: var(--evergreen-900);
  --surface-footer: var(--evergreen-900);
  --surface-gold: var(--gold-bg);

  --text-body: var(--text-primary);
  --text-soft: var(--text-secondary);
  --text-faint: var(--text-muted);

  --accent-gold: var(--gold-500);
  --accent-urgent: var(--red-500);

  --border-default: var(--border-light);
  --border-focus: var(--green-500);
}