/* =====================================================================
   ALTERZ DESIGN TOKENS
   Single source of truth for color, type, spacing, motion.
   Adapted from Alterz luxury layout but customized for Alterz Blue/Cyan theme.
   ===================================================================== */
:root {
  /* ---------- COLOR: BRAND ---------- */
  --color-navy-deep:   #090e1a; /* Deep slate corporate navy (for hero background overlays and footers) */
  --color-navy:        #0f172a; /* Deep Slate-900 (used for headings, titles, and admin sidebar) */
  --color-navy-light:  #0052d4; /* Royal Navy / Alterz Primary Blue */
  --color-navy-soft:   #1e40af; /* Indigo / Alterz Secondary Blue */
  
  --color-gold-deep:   #0284c7; /* Deep Cyan / Sky Blue Accent */
  --color-gold:        #0ea5e9; /* Primary Cyan / Sky Blue Accent */
  --color-gold-light:  #38bdf8; /* Light Cyan */
  --color-gold-pale:   #e0f2fe; /* Very light cyan */

  /* ---------- COLOR: SURFACE ---------- */
  --color-bg:           #ffffff;
  --color-bg-soft:      #f4f6fa; /* Soft ice blue bg */
  --color-bg-soft-alt:  #e2e8f0; /* Slate 200 */
  --color-white:        #ffffff;

  /* ---------- COLOR: TEXT ---------- */
  --color-text:         #334155; /* Slate 700 (body text color) */
  --color-text-muted:   #475569; /* Slate 600 */
  --color-text-faint:   #94a3b8; /* Slate 400 */
  --color-text-on-navy: #f8fafc; /* Slate 50 */
  --color-text-on-gold: #ffffff; /* White text on cyan/blue accents */

  /* ---------- COLOR: UTILITY ---------- */
  --color-border:   #e2e8f0; /* Slate 200 */
  --color-border-strong: #cbd5e1; /* Slate 300 */
  --color-success:  #059669; /* Emerald 600 */
  --color-success-bg: rgba(5, 150, 105, 0.08);
  --color-danger:   #dc2626; /* Red 600 */
  --color-danger-bg: rgba(220, 38, 38, 0.08);
  --color-info:     #0ea5e9; /* Blue 500 */
  
  /* HSL Helpers for backwards compatibility if needed */
  --primary-hsl: 220, 90%, 42%;
  --primary: hsl(var(--primary-hsl));
  --secondary-hsl: 240, 80%, 50%;
  --secondary: hsl(var(--secondary-hsl));
  --accent-hsl: 195, 100%, 43%;
  --accent: hsl(var(--accent-hsl));

  /* ---------- GRADIENTS ---------- */
  --gradient-navy-overlay: linear-gradient(180deg, rgba(9, 14, 26, 0.5) 0%, rgba(9, 14, 26, 0.95) 100%);
  --gradient-navy-deep:    linear-gradient(135deg, var(--color-navy-deep) 0%, var(--color-navy) 60%, var(--color-navy-light) 100%);
  --gradient-gold-line:    linear-gradient(90deg, var(--color-gold-deep) 0%, var(--color-gold-light) 100%);
  --gradient-gold-sheen:   linear-gradient(135deg, var(--color-navy-light) 0%, var(--color-gold) 50%, var(--color-navy-light) 100%);
  --gradient-gold-text:    linear-gradient(135deg, var(--color-navy-light) 0%, var(--color-gold) 50%, var(--color-gold-deep) 100%);
  --gradient-premium-glow: radial-gradient(circle, rgba(14, 165, 233, 0.15) 0%, rgba(15, 23, 42, 0) 70%);
  --gradient-soft-glow:    radial-gradient(circle, rgba(0, 82, 212, 0.05) 0%, rgba(255, 255, 255, 0) 70%);

  /* ---------- TYPOGRAPHY ---------- */
  --font-heading: 'Outfit', sans-serif; /* Set heading to bold Display sans-serif */
  --font-accent: 'Montserrat', sans-serif;
  --font-body: 'Inter', sans-serif;
  --fs-h1: clamp(2.5rem, 5vw + 1rem, 4.2rem);
  --fs-h2: clamp(2rem, 3.2vw + 1rem, 3.2rem);
  --fs-h3: clamp(1.4rem, 1.6vw + 1rem, 2rem);
  --fs-h4: 1.3rem;
  --fs-body-lg: 1.15rem;
  --fs-body: 1rem;
  --fs-small: 0.875rem;
  --fs-xs: 0.75rem;
  --fs-eyebrow: 0.8125rem;
  --lh-heading: 1.15;
  --lh-body: 1.7;

  /* ---------- SPACING SCALE ---------- */
  --space-xs: 0.5rem;
  --space-sm: 1rem;
  --space-md: 1.5rem;
  --space-lg: 2.5rem;
  --space-xl: 4rem;
  --space-2xl: 6rem;
  --space-3xl: 8rem;
  --section-padding-y: clamp(3.2rem, 5.5vw, 4.8rem); /* Compact premium spacing */

  /* ---------- RADIUS ---------- */
  --radius-card: 24px; /* Premium larger border radius */
  --radius-card-lg: 32px;
  --radius-btn: 999px; /* Capsule buttons */
  --radius-pill: 999px;
  --radius-sm: 12px;

  /* ---------- SHADOW (premium glass/solid shadows) ---------- */
  --shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.03);
  --shadow-card: 0 4px 30px rgba(15, 23, 42, 0.03), 0 10px 40px rgba(15, 23, 42, 0.04);
  --shadow-card-hover: 0 20px 40px rgba(15, 23, 42, 0.08), 0 1px 3px rgba(15, 23, 42, 0.02);
  --shadow-header: 0 4px 30px rgba(15, 23, 42, 0.03);
  --shadow-btn-gold: 0 10px 25px rgba(0, 82, 212, 0.25);
  --shadow-modal: 0 25px 50px -12px rgba(0, 0, 0, 0.25);

  /* ---------- MOTION ---------- */
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out-soft: cubic-bezier(0.16, 1, 0.3, 1);
  --duration-fast: 0.2s;
  --duration-base: 0.35s;
  --duration-slow: 0.6s;

  /* ---------- LAYOUT ---------- */
  --header-height: 88px;
  --header-height-scrolled: 72px;
  --container-max: 1280px;

  /* ---------- LEGACY ALIASES ---------- */
  --color-gold-deep-legacy: var(--color-gold-deep);

  /* ---------- BRAND SPACING ALIASES ---------- */
  --sp-1: 0.25rem;  /* 4px */
  --sp-2: 0.5rem;   /* 8px */
  --sp-3: 0.75rem;  /* 12px */
  --sp-4: 1rem;     /* 16px */
  --sp-5: 1.25rem;  /* 20px */
  --sp-6: 1.5rem;   /* 24px */
  --sp-8: 2rem;     /* 32px */
  --sp-10: 2.5rem;  /* 40px */
  --sp-12: 3rem;    /* 48px */
  --sp-16: 4rem;    /* 64px */
  --sp-20: 5rem;    /* 80px */
  --sp-24: 6rem;    /* 96px */
}

/* Respect reduced motion preference globally */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}