/* =============================================
   NathoAsto - Global Design System Variables
   Brand Colors extracted from nathoasto.com
   ============================================= */

:root {
  /* ── Brand Colors ── */
  --clr-primary:       #c6a664;   /* Golden/Champagne - Main accent */
  --clr-primary-light: #d4bb82;
  --clr-primary-dark:  #a8893f;
  --clr-primary-rgb:   198, 166, 100;

  --clr-secondary:     #fb2056;   /* Vibrant Red - Secondary accent */
  --clr-secondary-rgb: 251, 32, 86;

  /* ── Neutral Scale ── */
  --clr-bg:            #0a0a0a;   /* Deepest background */
  --clr-bg-2:          #111111;   /* Surface level 2 */
  --clr-bg-3:          #191919;   /* Surface level 3 (cards) */
  --clr-bg-4:          #242424;   /* Surface level 4 (hover states) */
  --clr-border:        rgba(198, 166, 100, 0.15);
  --clr-border-hover:  rgba(198, 166, 100, 0.45);

  --clr-text:          #ffffff;
  --clr-text-muted:    rgba(255, 255, 255, 0.55);
  --clr-text-sub:      rgba(255, 255, 255, 0.35);

  /* ── Glassmorphism ── */
  --glass-bg:          rgba(255, 255, 255, 0.04);
  --glass-bg-hover:    rgba(255, 255, 255, 0.07);
  --glass-border:      rgba(255, 255, 255, 0.08);
  --glass-blur:        blur(20px);
  --glass-blur-heavy:  blur(40px);

  /* ── Gradients ── */
  --grad-primary:      linear-gradient(135deg, #c6a664 0%, #a8893f 100%);
  --grad-secondary:    linear-gradient(135deg, #fb2056 0%, #c6001e 100%);
  --grad-hero:         radial-gradient(ellipse 80% 60% at 50% 0%, rgba(198, 166, 100, 0.12) 0%, transparent 70%),
                       radial-gradient(ellipse 60% 40% at 80% 50%, rgba(251, 32, 86, 0.06) 0%, transparent 60%);
  --grad-card-border:  linear-gradient(135deg, rgba(198,166,100,0.3), rgba(251,32,86,0.1), transparent);

  /* ── Shadows / Glows ── */
  --glow-primary:      0 0 40px rgba(198, 166, 100, 0.25), 0 0 80px rgba(198, 166, 100, 0.1);
  --glow-secondary:    0 0 40px rgba(251, 32, 86, 0.25);
  --shadow-card:       0 8px 32px rgba(0, 0, 0, 0.4);
  --shadow-card-hover: 0 20px 60px rgba(0, 0, 0, 0.6), 0 0 40px rgba(198, 166, 100, 0.15);

  /* ── Typography ── */
  --font-heading:      'Plus Jakarta Sans', 'Poppins', sans-serif;
  --font-body:         'Inter', 'Plus Jakarta Sans', sans-serif;

  --fs-xs:    clamp(0.75rem,  1.5vw, 0.875rem);
  --fs-sm:    clamp(0.875rem, 1.8vw, 1rem);
  --fs-base:  clamp(1rem,     2vw,   1.125rem);
  --fs-lg:    clamp(1.125rem, 2.2vw, 1.25rem);
  --fs-xl:    clamp(1.25rem,  2.5vw, 1.5rem);
  --fs-2xl:   clamp(1.5rem,   3vw,   2rem);
  --fs-3xl:   clamp(2rem,     4vw,   2.75rem);
  --fs-4xl:   clamp(2.5rem,   5vw,   3.75rem);
  --fs-5xl:   clamp(3rem,     6vw,   5rem);

  /* ── Spacing ── */
  --sp-xs:   0.5rem;
  --sp-sm:   1rem;
  --sp-md:   1.5rem;
  --sp-lg:   2rem;
  --sp-xl:   3rem;
  --sp-2xl:  5rem;
  --sp-3xl:  8rem;

  /* ── Border Radius ── */
  --radius-sm:   8px;
  --radius-md:   16px;
  --radius-lg:   24px;
  --radius-xl:   32px;
  --radius-pill: 999px;

  /* ── Transitions ── */
  --transition-fast:   all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-base:   all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow:   all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-spring: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);

  /* ── Z-Index Scale ── */
  --z-base:     0;
  --z-elevated: 10;
  --z-sticky:   100;
  --z-overlay:  200;
  --z-modal:    300;
  --z-toast:    400;

  /* ── Navigation ── */
  --nav-height: 80px;
}