:root {
  /* Layout */
  --container-max: 1520px;
  --container-padding-x: 20px;
  --header-height: 110px;
  --section-gap: 40px;
  --card-gap: 24px;

  /* Font */
  --font-primary: "Outfit", "Segoe UI", Arial, sans-serif;
  --font-display: "Outfit", sans-serif;

  /* ── Colors ─────────────────────────────────────────────────
     Sourced from Figma file nxSfcOF5HZKc9bRaZ26Iro (node 2:4)
     Theme: deep purple-black with violet accent
  ─────────────────────────────────────────────────────────── */

  /* Backgrounds */
  --color-bg: #080816;
  --color-bg-2: #0d0d22;
  --color-surface: rgba(16, 12, 40, 0.90);
  --color-surface-soft: rgba(24, 18, 56, 0.75);
  --color-surface-dark: rgba(5, 4, 16, 0.96);

  /* Primary — violet/purple (buttons, links, active states) */
  --color-primary: #8B3FEF;
  --color-primary-dark: #5B0FCC;
  --color-primary-soft: rgba(139, 63, 239, 0.20);

  /* Secondary & accents */
  --color-secondary: #C380FF;
  --color-accent: #FFD35A;     /* gold — offer/highlight text only */
  --color-accent-2: #FF8A2A;   /* orange — secondary highlights */

  /* Text */
  --color-text: #ffffff;
  --color-text-muted: rgba(255, 255, 255, 0.68);
  --color-text-soft: rgba(255, 255, 255, 0.42);

  /* Borders */
  --color-border: rgba(255, 255, 255, 0.10);
  --color-border-bright: #C380FF;

  /* ── Gradients ───────────────────────────────────────────── */

  /* Page background — deep purple radial glows */
  --gradient-page:
    
    linear-gradient(180deg, #010011 0%, #2c0e41 100%);

  /* Card/panel background — dark purple-tinted */
  --gradient-card: linear-gradient(145deg, rgba(18, 12, 44, 0.94), rgba(8, 5, 22, 0.97));

  /* Primary CTA button — violet gradient (Register, Join Now, etc.) */
  --gradient-button: linear-gradient(135deg, #9B5CF6 0%, #6D28D9 100%);

  /* Secondary action button — slightly brighter violet-cyan */
  --gradient-blue-button: linear-gradient(135deg, #A78BFA 0%, #7C3AED 100%);

  /* ── Radius ──────────────────────────────────────────────── */
  --radius-xs: 8px;
  --radius-sm: 12px;
  --radius-md: 18px;
  --radius-lg: 28px;
  --radius-xl: 36px;
  --radius-pill: 999px;

  /* ── Shadows ─────────────────────────────────────────────── */
  --shadow-card: 0 18px 48px rgba(0, 0, 0, 0.50);
  --shadow-glow-blue: 0 0 28px rgba(139, 63, 239, 0.42);   /* purple glow */
  --shadow-glow-gold: 0 0 24px rgba(255, 184, 58, 0.35);   /* gold glow */

  /* ── Transitions ─────────────────────────────────────────── */
  --transition-fast: 160ms ease;
  --transition-base: 240ms ease;

  /* ── Z-index ─────────────────────────────────────────────── */
  --z-header: 100;
  --z-floating: 200;
  --z-modal: 500;
}