/* ==========================================================================
   SPECTRUM ALLIANCE — DESIGN TOKENS
   Global CSS custom properties. Product pages may override --brand-* vars.
   ========================================================================== */

:root {
  /* ── Core Palette ──────────────────────────────────────────────────── */
  --sa-void:        #060810;
  --sa-dark:        #0A0F1E;
  --sa-midnight:    #111827;
  --sa-slate:       #1F2937;
  --sa-muted:       #374151;
  --sa-border:      #374151;
  --sa-ghost:       #6B7280;
  --sa-silver:      #9CA3AF;
  --sa-light:       #F3F4F6;
  --sa-white:       #FFFFFF;

  /* ── Brand Accent ──────────────────────────────────────────────────── */
  --sa-spectrum-1:  #FF3B30;
  --sa-spectrum-2:  #FF9500;
  --sa-spectrum-3:  #FFCC00;
  --sa-spectrum-4:  #34C759;
  --sa-spectrum-5:  #007AFF;
  --sa-spectrum-6:  #AF52DE;
  --sa-gradient: linear-gradient(135deg,#FF3B30,#FF9500,#FFCC00,#34C759,#007AFF,#AF52DE);
  --sa-gradient-h: linear-gradient(90deg,#FF3B30,#FF9500,#FFCC00,#34C759,#007AFF,#AF52DE);

  /* ── Product Palettes ───────────────────────────────────────────────── */
  /* WebStudio */
  --ws-purple:      #9000C7;
  --ws-blue:        #3A7BFF;
  --ws-dark:        #0D0D1A;
  --ws-gradient:    linear-gradient(135deg,#9000C7,#3A7BFF);

  /* ELES */
  --eles-green:     #064E3B;
  --eles-gold:      #D97706;
  --eles-cream:     #FEF3C7;
  --eles-dark:      #022C22;
  --eles-gradient:  linear-gradient(135deg,#064E3B,#0F766E);

  /* Sunshine HR */
  --shr-orange:     #F59E0B;
  --shr-amber:      #D97706;
  --shr-sun:        #FCD34D;
  --shr-warm:       #FFFBEB;
  --shr-dark:       #451A03;
  --shr-gradient:   linear-gradient(135deg,#F59E0B,#EF4444);

  /* LedgerPro */
  --lp-navy:        #030712;
  --lp-blue:        #1E40AF;
  --lp-accent:      #3B82F6;
  --lp-gradient:    linear-gradient(135deg,#1E40AF,#1D4ED8);

  /* LumorList */
  --ll-brown:       #78350F;
  --ll-amber:       #92400E;
  --ll-warm:        #B45309;
  --ll-gradient:    linear-gradient(135deg,#78350F,#92400E,#B45309);

  /* Membership */
  --mem-teal:       #0D9488;
  --mem-cyan:       #06B6D4;
  --mem-gradient:   linear-gradient(135deg,#0D9488,#06B6D4);

  /* ── Active Brand (overridden per product page) ─────────────────────── */
  --brand-primary:  var(--ws-blue);
  --brand-accent:   var(--ws-purple);
  --brand-gradient: var(--ws-gradient);
  --brand-dark:     var(--sa-dark);

  /* ── Typography ─────────────────────────────────────────────────────── */
  --font-display:   'Inter', system-ui, -apple-system, sans-serif;
  --font-body:      'Inter', system-ui, -apple-system, sans-serif;
  --font-mono:      'JetBrains Mono', 'Fira Code', monospace;

  --text-xs:   0.75rem;
  --text-sm:   0.875rem;
  --text-base: 1rem;
  --text-lg:   1.125rem;
  --text-xl:   1.25rem;
  --text-2xl:  1.5rem;
  --text-3xl:  1.875rem;
  --text-4xl:  2.25rem;
  --text-5xl:  3rem;
  --text-6xl:  3.75rem;
  --text-7xl:  4.5rem;
  --text-8xl:  6rem;

  --leading-tight:  1.1;
  --leading-snug:   1.3;
  --leading-normal: 1.5;
  --leading-relaxed:1.75;

  --weight-light:   300;
  --weight-normal:  400;
  --weight-medium:  500;
  --weight-semi:    600;
  --weight-bold:    700;
  --weight-black:   900;

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

  /* ── Containers ──────────────────────────────────────────────────────── */
  --container-sm:  640px;
  --container-md:  768px;
  --container-lg:  1024px;
  --container-xl:  1280px;
  --container-2xl: 1440px;

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

  /* ── Elevation / Shadow ──────────────────────────────────────────────── */
  --shadow-sm:  0 1px 3px rgba(0,0,0,0.3), 0 1px 2px rgba(0,0,0,0.2);
  --shadow-md:  0 4px 16px rgba(0,0,0,0.4);
  --shadow-lg:  0 10px 40px rgba(0,0,0,0.5);
  --shadow-xl:  0 20px 60px rgba(0,0,0,0.6);
  --shadow-glow:0 0 40px rgba(58,123,255,0.25);

  /* ── Transitions ─────────────────────────────────────────────────────── */
  --ease-out:    cubic-bezier(0.16,1,0.3,1);
  --ease-in-out: cubic-bezier(0.4,0,0.2,1);
  --dur-fast:    150ms;
  --dur-base:    250ms;
  --dur-slow:    450ms;
  --dur-scene:   1200ms;

  /* ── Z-Index ─────────────────────────────────────────────────────────── */
  --z-base:    0;
  --z-raised:  10;
  --z-overlay: 100;
  --z-nav:     900;
  --z-modal:   1000;
  --z-toast:   1100;
}