/* ============================================================
   NexSub Design System — CSS Custom Properties
   Zone 1: Hero band (gradient, hero-specific accents)
   Zone 2: Dark page body (cards, text, statuses, surfaces)
   ============================================================ */

:root {
  /* ── Zone 1: Hero band ─────────────────────────────── */
  --hero-gradient-start: #5A3FB5;
  --hero-gradient-mid:   #664DC4;
  --hero-gradient-end:   #3B82F6;
  --hero-gradient: radial-gradient(
    1400px 800px at 50% 0%,
    var(--hero-gradient-end) 0%,
    var(--hero-gradient-mid) 45%,
    var(--hero-gradient-start) 80%
  );
  --hero-announcement-bg:   #6853C1;
  --hero-btn-primary-bg:    #FFFFFF;
  --hero-btn-primary-text:  #0E0A19;
  --hero-btn-secondary-bg:  #5A3FB5;
  --hero-btn-secondary-text:#FFFFFF;
  --nav-pill-active-bg:     #563DB5;
  --nav-pill-active-text:   #FFFFFF;

  /* ── Zone 2: Dark page body ─────────────────────────── */
  --bg-primary:       #0E0A19;
  --bg-card:          #120E1F;
  --bg-card-alt:      #130F20;
  --bg-sidebar:       #0C0A16;
  --bg-elevated:      #1A1530;

  /* ── Brand accent palette ───────────────────────────── */
  --accent-primary:   #6853C1;
  --accent-primary-hover: #7C5CE0;
  --accent-secondary: #3B82F6;
  --accent-glow:      rgba(104, 83, 193, 0.25);

  /* ── Text ───────────────────────────────────────────── */
  --text-primary:     #FFFFFF;
  --text-secondary:   #C8C4DB;
  --text-muted:       #A8A4BD;
  --text-dim:         #6B6780;
  --text-link:        #7C5CE0;
  --text-link-hover:  #9B8FEE;

  /* ── Status colors (reusable across /track + admin tables) ── */
  --status-pending:     #F59E0B;
  --status-pending-bg:  rgba(245, 158, 11, 0.12);
  --status-paid:        #8B5CF6;
  --status-paid-bg:     rgba(139, 92, 246, 0.12);
  --status-processing:  #3B82F6;
  --status-processing-bg: rgba(59, 130, 246, 0.12);
  --status-delivered:   #10B981;
  --status-delivered-bg: rgba(16, 185, 129, 0.12);
  --status-refunded:    #9CA3AF;
  --status-refunded-bg: rgba(156, 163, 175, 0.12);
  --status-cancelled:   #EF4444;
  --status-cancelled-bg: rgba(239, 68, 68, 0.12);

  /* ── Borders ────────────────────────────────────────── */
  --border-subtle:    rgba(255, 255, 255, 0.06);
  --border-default:   rgba(255, 255, 255, 0.10);
  --border-strong:    rgba(255, 255, 255, 0.15);
  --border-accent:    rgba(104, 83, 193, 0.40);

  /* ── Border radius ──────────────────────────────────── */
  --radius-sm:    8px;
  --radius-md:    12px;
  --radius-lg:    16px;
  --radius-xl:    24px;
  --radius-full:  999px;

  /* ── Shadows & glows ────────────────────────────────── */
  --shadow-sm:     0 1px 2px rgba(0, 0, 0, 0.30);
  --shadow-md:     0 4px 16px rgba(0, 0, 0, 0.40);
  --shadow-lg:     0 8px 40px rgba(0, 0, 0, 0.50);
  --glow-purple:   0 0 40px rgba(104, 83, 193, 0.20);
  --glow-blue:     0 0 40px rgba(59, 130, 246, 0.15);
  --card-glow:     0 1px 0 rgba(104, 83, 193, 0.15) inset,
                   0 -1px 24px rgba(104, 83, 193, 0.06) inset;

  /* ── Typography ─────────────────────────────────────── */
  --font-heading:  'Poppins', 'Plus Jakarta Sans', 'Urbanist', sans-serif;
  --font-body:     'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
                   Oxygen, Ubuntu, Cantarell, sans-serif;
  --font-mono:     'JetBrains Mono', 'Fira Code', 'Cascadia Code', monospace;

  --text-xs:   0.75rem;    /* 12px */
  --text-sm:   0.875rem;   /* 14px */
  --text-base: 1rem;       /* 16px */
  --text-lg:   1.125rem;   /* 18px */
  --text-xl:   1.25rem;    /* 20px */
  --text-2xl:  1.5rem;     /* 24px */
  --text-3xl:  1.875rem;   /* 30px */
  --text-4xl:  2.25rem;    /* 36px */
  --text-5xl:  3rem;       /* 48px */
  --text-6xl:  3.75rem;    /* 60px */

  --leading-tight:   1.15;
  --leading-snug:    1.35;
  --leading-normal:  1.6;
  --leading-relaxed: 1.75;

  --weight-normal:   400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;
  --weight-extrabold:800;

  /* ── Spacing scale ──────────────────────────────────── */
  --space-1:  0.25rem;   /* 4px  */
  --space-2:  0.5rem;    /* 8px  */
  --space-3:  0.75rem;   /* 12px */
  --space-4:  1rem;      /* 16px */
  --space-5:  1.25rem;   /* 20px */
  --space-6:  1.5rem;    /* 24px */
  --space-8:  2rem;      /* 32px */
  --space-10: 2.5rem;    /* 40px */
  --space-12: 3rem;      /* 48px */
  --space-16: 4rem;      /* 64px */
  --space-20: 5rem;      /* 80px */
  --space-24: 6rem;      /* 96px */

  /* ── Layout ─────────────────────────────────────────── */
  --container-max: 1200px;
  --container-narrow: 900px;
  --container-wide: 1400px;
  --header-height: 72px;

  /* ── Transitions ────────────────────────────────────── */
  --ease-out:     cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out:  cubic-bezier(0.65, 0, 0.35, 1);
  --duration-fast:   150ms;
  --duration-base:   250ms;
  --duration-slow:   400ms;

  /* ── Z-index scale ──────────────────────────────────── */
  --z-dropdown:   100;
  --z-sticky:     200;
  --z-overlay:    300;
  --z-modal:      400;
  --z-toast:      500;
}