/* Fix Express REWARDS+ — Global Theme / Design Tokens (Premium White & Gold)
   The ONLY file that contains colour values. Every other stylesheet uses the semantic tokens below.
   Contrast ratios (WCAG 2.1) are verified by test/design_tokens.test.js. */
:root {
  /* ── Official palette (Owner-approved) ── */
  --fx-pearl:      #FFFFFF;  /* Primary Background */
  --fx-gold:       #F9BB2D;  /* Brand Primary — fills, buttons, points on dark */
  --fx-charcoal:   #1A1A1A;  /* Premium Dark */
  --fx-cream:      #FFF8E8;  /* Secondary Background */
  --fx-champagne:  #B88928;  /* VIP Gold — accents on dark, VIP gradient */
  --fx-text:       #222222;  /* Main Text */
  --fx-text-2:     #6B7280;  /* Secondary Text */
  --fx-border:     #E5E7EB;  /* Border */

  /* ── Derived tones (needed for WCAG AA; gold/champagne fail as text on white) ── */
  --fx-gold-ink:    #8A6416;  /* gold-family text on white/cream: 5.36:1 */
  --fx-gold-soft:   #FDEFC9;  /* gold tint background */
  --fx-gold-line:   #F1D28A;  /* gold hairline / dashed border */
  --fx-muted:       #F7F7F8;  /* neutral fill */
  --fx-on-dark:     #FFFFFF;
  --fx-on-dark-2:   #B5B5B5;  /* 8.49:1 on charcoal */
  --fx-vip-deep:    #2A2416;  /* VIP gradient end (charcoal → warm) */
  --fx-success:     #166534;  --fx-success-soft: #E8F6EC;
  --fx-pending:     #7A5B00;  --fx-pending-soft: #FEF6D8;
  --fx-danger:      #B42318;  --fx-danger-soft:  #FDECEA;
  --fx-expired:     #4B5563;  --fx-expired-soft: #F3F4F6;  /* 6.87:1 */
  --fx-qr-bg:       #FFFFFF;  --fx-qr-ink: #000000;
  --fx-shadow:      rgba(26, 26, 26, .08);

  /* ── Semantic tokens (use these in components) ── */
  --bg: var(--fx-pearl);
  --surface: var(--fx-pearl);
  --surface-2: var(--fx-muted);
  --surface-warm: var(--fx-cream);
  --ink: var(--fx-text);
  --ink-2: var(--fx-text-2);
  --line: var(--fx-border);

  --accent: var(--fx-gold);           /* primary buttons, active marks, badges */
  --on-accent: var(--fx-charcoal);    /* text/icons on gold: 10.09:1 */
  --accent-ink: var(--fx-gold-ink);   /* gold-coloured text on light backgrounds */
  --accent-soft: var(--fx-gold-soft);
  --accent-line: var(--fx-gold-line);

  --dark: var(--fx-charcoal);         /* member card, headers */
  --on-dark: var(--fx-on-dark);
  --on-dark-2: var(--fx-on-dark-2);
  --points: var(--fx-gold);           /* points / credits figure on the dark card */

  --vip-from: var(--fx-charcoal);
  --vip-to: var(--fx-vip-deep);
  --vip-gold: var(--fx-champagne);

  --ok: var(--fx-success);       --ok-soft: var(--fx-success-soft);
  --pending: var(--fx-pending);  --pending-soft: var(--fx-pending-soft);
  --danger: var(--fx-danger);    --danger-soft: var(--fx-danger-soft);
  --expired: var(--fx-expired);  --expired-soft: var(--fx-expired-soft);

  /* Promotion cards: defaults only. A future admin setting can override these per campaign
     (e.g. a data-promo-theme attribute or a server-supplied stylesheet) without touching components. */
  --promo-bg: var(--fx-pearl);
  --promo-ink: var(--fx-text);
  --promo-accent: var(--fx-gold);
  --promo-on-accent: var(--fx-charcoal);
  --promo-border: var(--fx-border);

  --focus: var(--fx-charcoal);
  --shadow-sm: 0 1px 2px var(--fx-shadow);
  --shadow-md: 0 8px 24px -12px var(--fx-shadow);

  --r-lg: 20px; --r-md: 14px; --r-sm: 10px;
  --display: "Adventor", "Avenir Next", "Century Gothic", system-ui, sans-serif;
  --font: "Inter RP", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color-scheme: light;
}

/* Optional per-campaign themes an admin can pick later (no code change needed to add more here). */
[data-promo-theme="dark"]  { --promo-bg: var(--fx-charcoal); --promo-ink: var(--fx-on-dark); --promo-border: var(--fx-charcoal); }
[data-promo-theme="cream"] { --promo-bg: var(--fx-cream); --promo-border: var(--fx-gold-line); }