/* =========================================================================
   WinZone design tokens
   Single source of truth for the subscribe screen. Reference these vars
   (var(--wz-*)) from component CSS instead of hard-coding values.
   ========================================================================= */
:root {
  /* ---- Color: backgrounds (pixel-sampled from mockup) ---- */
  --wz-bg-base: #01022d;          /* near-black navy at edges/top */
  --wz-bg-glow: #15136e;          /* indigo radial glow behind logo (#0F106A) */
  --wz-bg-base-dark: #0b0316;     /* dark purple at bottom (#100215) */
  --wz-bg-surface: #1a1145;       /* card / feature pill surface (#160B49) */
  --wz-bg-surface-alt: #2a1366;   /* raised pill / input fill (#380E65) */

  /* ---- Color: brand / accents ---- */
  --wz-brand-yellow: #ffb422;     /* "WIN" logo gold */
  --wz-brand-orange: #f18800;     /* CTA gradient end / lightning (sampled) */
  --wz-brand-cyan: #2be7ff;       /* "ZONE" + highlighted text neon cyan */
  --wz-accent-magenta: #b21fe0;   /* PLAY-WIN-ENJOY ribbon (#471190 base) */
  --wz-accent-purple: #7b2ff7;    /* gift box, icon chip glow */
  --wz-accent-green: #58a836;     /* shield / checkmark (#587E34) */

  /* ---- Color: feature icon chips ---- */
  --wz-chip-blue: #2d6bff;        /* calendar */
  --wz-chip-violet: #5b6bd6;      /* gamepad */
  --wz-chip-gold: #f5a623;        /* crown */
  --wz-chip-green: #58a836;       /* shield */

  /* ---- Color: text ---- */
  --wz-text-primary: #ffffff;
  --wz-text-on-cta: #0a0618;      /* near-black navy glyph on gold button (#010013) */
  --wz-text-muted: #b8b0d8;       /* placeholders */
  --wz-text-cyan: #19e3ff;

  /* ---- Typography ---- */
  --wz-font-body: "Poppins-Regular", "Titillium Web", sans-serif;
  --wz-font-medium: "Poppins-Medium", "Poppins-Regular", sans-serif;
  --wz-text-h1: 26px;
  --wz-text-list: 16px;
  --wz-text-cta: 22px;
  --wz-text-input: 16px;
  --wz-text-caption: 11px;

  /* ---- Spacing ---- */
  --wz-space-xs: 4px;
  --wz-space-sm: 8px;
  --wz-space-md: 12px;
  --wz-space-lg: 16px;
  --wz-space-xl: 24px;
  --wz-space-2xl: 32px;
  --wz-page-pad: 20px;

  /* ---- Border radius ---- */
  --wz-radius-sm: 8px;
  --wz-radius-chip: 12px;
  --wz-radius-card: 20px;
  --wz-radius-pill: 999px;

  /* ---- Borders ---- */
  --wz-border-neon: 1px solid rgba(25, 227, 255, 0.5);

  /* ---- Shadows / glow ---- */
  --wz-shadow-cta: 0 6px 16px rgba(255, 122, 24, 0.45);
  --wz-shadow-card: 0 4px 12px rgba(0, 0, 0, 0.45);
  --wz-glow-cyan: 0 0 12px rgba(25, 227, 255, 0.7);
  --wz-glow-magenta: 0 0 14px rgba(224, 64, 251, 0.6);
  --wz-glow-gold: 0 0 10px rgba(255, 180, 34, 0.65);

  /* ---- Gradients (sampled) ---- */
  /* CTA: light gold -> deep orange, left to right */
  --wz-gradient-cta: linear-gradient(90deg, #ffc93c 0%, #fdb022 45%, #f18800 100%);
  /* Page: indigo glow behind the logo, fading to dark navy edges and purple-black bottom */
  --wz-gradient-bg:
    radial-gradient(ellipse 80% 45% at 50% 26%, var(--wz-bg-glow) 0%, rgba(10, 8, 51, 0) 60%),
    linear-gradient(180deg, var(--wz-bg-base) 0%, #060327 55%, var(--wz-bg-base-dark) 100%);
}