/* ================================================
   OPENENVELOPE — DESIGN SYSTEM TOKENS
   ================================================ */
:root {
  /* Backgrounds */
  --bg-primary:   #050713;
  --bg-secondary: #080B1A;
  --bg-surface:   #0D1124;
  --bg-elevated:  #11172D;
  --bg-card:      #0F1428;

  /* Brand */
  --violet:        #7C3AED;
  --violet-light:  #A855F7;
  --violet-glow:   rgba(124,58,237,0.15);
  --blue:          #2563EB;
  --blue-light:    #3B82F6;
  --cyan:          #22D3EE;
  --cyan-glow:     rgba(34,211,238,0.12);

  /* Text */
  --text-primary:   #F8FAFC;
  --text-secondary: #A8B1C7;
  --text-muted:     #6B7280;
  --text-dim:       #4B5563;

  /* Borders */
  --border:       rgba(255,255,255,0.07);
  --border-glow:  rgba(168,85,247,0.25);
  --border-cyan:  rgba(34,211,238,0.2);

  /* Gradients */
  --grad-brand:   linear-gradient(135deg,#7C3AED 0%,#2563EB 55%,#22D3EE 100%);
  --grad-hover:   linear-gradient(135deg,#A855F7 0%,#3B82F6 55%,#22D3EE 100%);
  --grad-text:    linear-gradient(160deg,#ffffff 30%,rgba(255,255,255,0.45) 100%);
  --grad-surface: linear-gradient(160deg,rgba(13,17,36,0.7) 0%,rgba(8,11,26,0.95) 100%);
  --grad-violet:  linear-gradient(135deg,rgba(124,58,237,0.12) 0%,transparent 60%);
  --grad-cyan:    linear-gradient(135deg,rgba(34,211,238,0.08) 0%,transparent 60%);

  /* Shadows */
  --shadow-xs:   0 1px 4px rgba(0,0,0,0.4);
  --shadow-sm:   0 2px 12px rgba(0,0,0,0.5);
  --shadow-md:   0 8px 28px rgba(0,0,0,0.6);
  --shadow-lg:   0 16px 48px rgba(0,0,0,0.7);
  --shadow-glow: 0 0 50px rgba(124,58,237,0.22);
  --shadow-cyan: 0 0 40px rgba(34,211,238,0.15);

  /* Radius */
  --r-xs:  4px;
  --r-sm:  8px;
  --r-md:  14px;
  --r-lg:  20px;
  --r-xl:  28px;
  --r-2xl: 40px;

  /* Spacing scale */
  --sp-1:  0.25rem;
  --sp-2:  0.5rem;
  --sp-3:  0.75rem;
  --sp-4:  1rem;
  --sp-5:  1.25rem;
  --sp-6:  1.5rem;
  --sp-7:  1.75rem;
  --sp-8:  2rem;
  --sp-9:  2.25rem;
  --sp-10: 2.5rem;
  --sp-11: 2.75rem;
  --sp-12: 3rem;
  --sp-14: 3.5rem;
  --sp-16: 4rem;
  --sp-20: 5rem;
  --sp-24: 6rem;
  --sp-32: 8rem;

  /* Global card / panel inner padding */
  --panel-pad-x: clamp(1.25rem, 2.5vw, 2rem);
  --panel-pad-y: clamp(1.25rem, 2vw, 1.75rem);

  /* Layout */
  --max-w:    1220px;
  --header-h: 76px;

  /* Transitions */
  --t-fast:  0.18s cubic-bezier(0.16,1,0.3,1);
  --t-mid:   0.4s  cubic-bezier(0.16,1,0.3,1);
  --t-slow:  0.75s cubic-bezier(0.16,1,0.3,1);

  /* Section vertical padding */
  --section-y: 80px;
}