/* ============================================================
   MONK OF IBIZA — CSS VARIABLES
   Sacred beats from the island of light
   ============================================================ */

:root {
  /* === COLORS === */
  --bg-main: #050505;
  --bg-soft: #0B0B0D;
  --bg-card: #0f0f12;
  --bg-glass: rgba(15, 15, 18, 0.7);

  --gold-main: #D6A84F;
  --gold-soft: #F3D98B;
  --gold-dim: rgba(214, 168, 79, 0.15);
  --gold-glow: rgba(214, 168, 79, 0.35);

  --ibiza-blue: #4DB8FF;
  --ibiza-blue-dim: rgba(77, 184, 255, 0.15);
  --sunset-orange: #FF9A4D;
  --violet-night: #7C5CFF;
  --violet-dim: rgba(124, 92, 255, 0.15);

  --white-soft: #F5F2EA;
  --white-dim: rgba(245, 242, 234, 0.6);
  --text-muted: #A8A8A8;
  --text-faint: #555560;

  /* === GRADIENTS === */
  --gradient-gold: linear-gradient(135deg, #D6A84F 0%, #F3D98B 50%, #D6A84F 100%);
  --gradient-hero: linear-gradient(180deg, rgba(5,5,5,0) 0%, rgba(5,5,5,0.4) 50%, rgba(5,5,5,0.95) 100%);
  --gradient-sunset: linear-gradient(135deg, #FF9A4D 0%, #D6A84F 50%, #7C5CFF 100%);
  --gradient-ibiza: linear-gradient(135deg, #4DB8FF 0%, #7C5CFF 100%);
  --gradient-card: linear-gradient(135deg, rgba(214,168,79,0.08) 0%, rgba(124,92,255,0.05) 100%);

  /* === TYPOGRAPHY === */
  --font-display: 'Cinzel', 'Cormorant Garamond', Georgia, serif;
  --font-body: 'Inter', 'Manrope', system-ui, -apple-system, sans-serif;
  --font-accent: 'Cormorant Garamond', Georgia, serif;

  --text-hero: clamp(3rem, 10vw, 8rem);
  --text-headline: clamp(2rem, 5vw, 4rem);
  --text-title: clamp(1.4rem, 3vw, 2.2rem);
  --text-subtitle: clamp(1rem, 2vw, 1.4rem);
  --text-body: clamp(0.9rem, 1.5vw, 1.05rem);
  --text-small: 0.85rem;
  --text-xs: 0.75rem;

  /* === SPACING === */
  --space-xs: 0.5rem;
  --space-sm: 1rem;
  --space-md: 2rem;
  --space-lg: 4rem;
  --space-xl: 8rem;
  --space-2xl: 12rem;
  --section-padding: clamp(4rem, 10vh, 10rem);

  /* === BORDERS & RADIUS === */
  --border-gold: 1px solid rgba(214, 168, 79, 0.25);
  --border-glass: 1px solid rgba(255, 255, 255, 0.06);
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-full: 100px;

  /* === SHADOWS === */
  --shadow-gold: 0 0 40px rgba(214, 168, 79, 0.2);
  --shadow-card: 0 20px 60px rgba(0, 0, 0, 0.5);
  --shadow-glow: 0 0 80px rgba(214, 168, 79, 0.1);
  --shadow-violet: 0 0 40px rgba(124, 92, 255, 0.2);

  /* === TRANSITIONS === */
  --ease-smooth: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --transition-fast: 0.2s var(--ease-smooth);
  --transition-med: 0.4s var(--ease-smooth);
  --transition-slow: 0.8s var(--ease-out);

  /* === Z-INDEX === */
  --z-base: 1;
  --z-card: 10;
  --z-nav: 100;
  --z-modal: 200;
  --z-overlay: 300;
}