/* ==========================================================================
   Get reVAmp HQ — Design Tokens
   Central source of truth for colors, typography, spacing, radii, shadows.
   Light theme is default; dark theme overrides via [data-theme="dark"].
   ========================================================================== */

:root {
  /* ---- Brand Colors ---- */
  --primary:        #0F62FE;
  --primary-hover:  #0B54DB;
  --royal:          #2563EB;
  --navy:           #071A52;
  --sky:            #38BDF8;
  --accent:         #60A5FA;
  --success:        #10B981;
  --warning:        #F59E0B;

  /* ---- Gradients ---- */
  --gradient-brand: linear-gradient(135deg, #0F62FE 0%, #38BDF8 100%);
  --gradient-deep:  linear-gradient(160deg, #071A52 0%, #0F62FE 120%);
  --gradient-text:  linear-gradient(90deg, #0F62FE, #38BDF8, #60A5FA);

  /* ---- Surfaces (Light) ---- */
  --bg:             #F8FAFC;
  --bg-elevated:    #FFFFFF;
  --bg-subtle:      #EFF4FB;
  --bg-inverse:     #030712;
  --glass:          rgba(255, 255, 255, 0.65);
  --glass-border:   rgba(15, 98, 254, 0.12);

  /* ---- Text (Light) ---- */
  --text:           #0B1220;
  --text-secondary: #475569;
  --text-muted:     #64748B;
  --text-inverse:   #F8FAFC;
  --text-on-brand:  #FFFFFF;

  /* ---- Lines & Shadows (Light) ---- */
  --border:         #E2E8F0;
  --border-strong:  #CBD5E1;
  --shadow-sm:      0 1px 2px rgba(7, 26, 82, 0.06);
  --shadow-md:      0 6px 24px -6px rgba(7, 26, 82, 0.12);
  --shadow-lg:      0 24px 60px -12px rgba(7, 26, 82, 0.18);
  --shadow-brand:   0 12px 32px -8px rgba(15, 98, 254, 0.45);

  /* ---- Typography ---- */
  --font-heading:   "Plus Jakarta Sans", "Inter", system-ui, -apple-system, sans-serif;
  --font-body:      "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;

  --fs-xs:   0.75rem;
  --fs-sm:   0.875rem;
  --fs-base: 1rem;
  --fs-md:   1.125rem;
  --fs-lg:   1.375rem;
  --fs-xl:   clamp(1.5rem, 1.2rem + 1.2vw, 2rem);
  --fs-2xl:  clamp(1.875rem, 1.4rem + 1.8vw, 2.75rem);
  --fs-hero: clamp(2.4rem, 1.6rem + 3.6vw, 4.25rem);

  /* ---- Spacing Scale ---- */
  --sp-1:  0.25rem;
  --sp-2:  0.5rem;
  --sp-3:  0.75rem;
  --sp-4:  1rem;
  --sp-5:  1.5rem;
  --sp-6:  2rem;
  --sp-7:  3rem;
  --sp-8:  4rem;
  --sp-9:  6rem;
  --sp-section: clamp(4rem, 3rem + 4vw, 7.5rem);

  /* ---- Radii ---- */
  --radius-sm:   8px;
  --radius-md:   14px;
  --radius-lg:   22px;
  --radius-xl:   32px;
  --radius-full: 999px;

  /* ---- Motion ---- */
  --ease:       cubic-bezier(0.22, 1, 0.36, 1);
  --speed-fast: 180ms;
  --speed:      320ms;
  --speed-slow: 640ms;

  /* ---- Layout ---- */
  --container:  1200px;
  --nav-height: 76px;
}

/* ==========================================================================
   Dark Theme
   ========================================================================== */
[data-theme="dark"] {
  --bg:             #030712;
  --bg-elevated:    #0B1120;
  --bg-subtle:      #0E1628;
  --bg-inverse:     #F8FAFC;
  --glass:          rgba(11, 17, 32, 0.62);
  --glass-border:   rgba(96, 165, 250, 0.16);

  --text:           #F1F5F9;
  --text-secondary: #A9B6CC;
  --text-muted:     #7C8AA5;
  --text-inverse:   #0B1220;

  --border:         #1C2740;
  --border-strong:  #2A3A5C;
  --shadow-sm:      0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-md:      0 6px 24px -6px rgba(0, 0, 0, 0.55);
  --shadow-lg:      0 24px 60px -12px rgba(0, 0, 0, 0.65);
  --shadow-brand:   0 12px 32px -8px rgba(15, 98, 254, 0.35);
}

/* Respect users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
  :root {
    --speed-fast: 0ms;
    --speed:      0ms;
    --speed-slow: 0ms;
  }
}