/* ============================================================
   VERISTREAM — Design Tokens (variables.css)
   Premium dark-mode music industry SaaS
   ============================================================ */

:root {
  /* ----------------------------------------------------------
     Brand Colors
     ---------------------------------------------------------- */
  --primary:        #04A1FE;
  --primary-light:  #38BDF8;
  --primary-dark:   #0284C7;

  /* ----------------------------------------------------------
     Backgrounds
     ---------------------------------------------------------- */
  --bg-primary:     #050508;
  --bg-secondary:   #0C0D12;
  --bg-card:        #12141C;
  --bg-card-hover:  #181B25;

  /* ----------------------------------------------------------
     Text
     ---------------------------------------------------------- */
  --text-primary:   #F8FAFC;
  --text-secondary: #94A3B8;
  --text-muted:     #64748B;

  /* ----------------------------------------------------------
     Accents
     ---------------------------------------------------------- */
  --accent-green:   #10B981;
  --accent-teal:    #06D6A0;
  --accent-purple:  #8B5CF6;
  --accent-pink:    #EC4899;

  /* ----------------------------------------------------------
     Borders
     ---------------------------------------------------------- */
  --border:         rgba(255, 255, 255, 0.08);
  --border-hover:   rgba(255, 255, 255, 0.15);

  /* ----------------------------------------------------------
     Gradients
     ---------------------------------------------------------- */
  --gradient-primary: linear-gradient(135deg, #04A1FE 0%, #06D6A0 100%);
  --gradient-hero:    linear-gradient(180deg, #050508 0%, #0C0D12 50%, #050508 100%);
  --gradient-card:    linear-gradient(135deg, rgba(4, 161, 254, 0.1) 0%, rgba(6, 214, 160, 0.1) 100%);

  /* ----------------------------------------------------------
     Typography — Families
     ---------------------------------------------------------- */
  --font-heading: 'Outfit', sans-serif;
  --font-body:    'DM Sans', sans-serif;

  /* ----------------------------------------------------------
     Typography — Sizes (responsive clamp)
     ---------------------------------------------------------- */
  --text-xs:   clamp(0.6875rem, 0.65rem + 0.15vw, 0.75rem);       /* ~11–12px */
  --text-sm:   clamp(0.8125rem, 0.78rem + 0.15vw, 0.875rem);      /* ~13–14px */
  --text-base: clamp(0.9375rem, 0.9rem + 0.18vw, 1rem);           /* ~15–16px */
  --text-lg:   clamp(1.0625rem, 1rem + 0.25vw, 1.125rem);         /* ~17–18px */
  --text-xl:   clamp(1.1875rem, 1.1rem + 0.4vw, 1.25rem);         /* ~19–20px */
  --text-2xl:  clamp(1.375rem, 1.2rem + 0.6vw, 1.5rem);           /* ~22–24px */
  --text-3xl:  clamp(1.75rem, 1.5rem + 1vw, 1.875rem);            /* ~28–30px */
  --text-4xl:  clamp(2rem, 1.6rem + 1.6vw, 2.25rem);              /* ~32–36px */
  --text-5xl:  clamp(2.5rem, 2rem + 2vw, 3rem);                   /* ~40–48px */
  --text-6xl:  clamp(3rem, 2.4rem + 2.4vw, 3.75rem);              /* ~48–60px */

  /* ----------------------------------------------------------
     Spacing — 4px grid
     ---------------------------------------------------------- */
  --space-1:   4px;
  --space-2:   8px;
  --space-3:   12px;
  --space-4:   16px;
  --space-5:   20px;
  --space-6:   24px;
  --space-7:   28px;
  --space-8:   32px;
  --space-9:   36px;
  --space-10:  40px;
  --space-12:  48px;
  --space-14:  56px;
  --space-16:  64px;
  --space-18:  72px;
  --space-20:  80px;
  --space-24:  96px;

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

  /* ----------------------------------------------------------
     Shadows
     ---------------------------------------------------------- */
  --shadow-sm:   0 1px 2px rgba(0, 0, 0, 0.25);
  --shadow-md:   0 4px 12px rgba(0, 0, 0, 0.35);
  --shadow-lg:   0 8px 30px rgba(0, 0, 0, 0.45);
  --shadow-glow: 0 0 30px rgba(4, 161, 254, 0.35);

  /* ----------------------------------------------------------
     Transitions
     ---------------------------------------------------------- */
  --transition-fast: 150ms ease;
  --transition-base: 250ms ease;
  --transition-slow: 500ms ease;

  /* ----------------------------------------------------------
     Z-Index Layers
     ---------------------------------------------------------- */
  --z-nav:     1000;
  --z-modal:   2000;
  --z-overlay: 3000;
}