/* ============================================
   AMAZE Events — Design Tokens
   ============================================ */

/* --- Font Faces --- */
@font-face {
  font-family: 'Outfit';
  src: url('../fonts/Outfit-Light.woff2') format('woff2');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Outfit';
  src: url('../fonts/Outfit-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Outfit';
  src: url('../fonts/Outfit-Medium.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Outfit';
  src: url('../fonts/Outfit-SemiBold.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Outfit';
  src: url('../fonts/Outfit-Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Outfit';
  src: url('../fonts/Outfit-ExtraBold.woff2') format('woff2');
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Outfit';
  src: url('../fonts/Outfit-Black.woff2') format('woff2');
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

/* --- CSS Custom Properties --- */
:root {
  /* Primary Brand Colors */
  --clr-deep-purple: #2D1B4E;
  --clr-vivid-magenta: #B5246F;
  --clr-mint: #78BD95;
  --clr-red-pink: #E63946;

  /* Neutrals */
  --clr-near-black: #0D0B14;
  --clr-dark-purple: #1A1029;
  --clr-soft-white: #F8F7FA;
  --clr-white: #FFFFFF;
  --clr-muted-lavender: #A89BBC;
  --clr-border: rgba(255, 255, 255, 0.08);

  /* Gradients */
  --grad-hero: linear-gradient(135deg, #0D0B14 0%, #2D1B4E 100%);
  --grad-brand: linear-gradient(135deg, #B5246F 0%, #E63946 100%);
  --grad-mint: linear-gradient(135deg, #78BD95 0%, #5FA87E 100%);
  --grad-overlay: linear-gradient(180deg, rgba(13, 11, 20, 0.85) 0%, rgba(45, 27, 78, 0.7) 100%);
  --grad-card: linear-gradient(145deg, rgba(255, 255, 255, 0.04) 0%, rgba(255, 255, 255, 0.01) 100%);

  /* Glow Effects */
  --glow-mint: 0 0 40px rgba(120, 189, 149, 0.25);
  --glow-magenta: 0 0 40px rgba(181, 36, 111, 0.25);

  /* Typography */
  --ff-primary: 'Outfit', system-ui, -apple-system, sans-serif;

  --fs-hero: clamp(2.5rem, 5vw + 1rem, 5.5rem);
  --fs-h2: clamp(1.75rem, 3vw + 0.5rem, 3.25rem);
  --fs-h3: clamp(1.25rem, 1.5vw + 0.5rem, 1.75rem);
  --fs-body: clamp(0.938rem, 0.5vw + 0.75rem, 1.125rem);
  --fs-caption: clamp(0.75rem, 0.3vw + 0.6rem, 0.875rem);
  --fs-btn: clamp(0.875rem, 0.3vw + 0.7rem, 1rem);
  --fs-counter: clamp(2.5rem, 4vw + 1rem, 5rem);

  --lh-tight: 1.05;
  --lh-heading: 1.15;
  --lh-body: 1.65;

  /* Spacing */
  --space-unit: 8px;
  --space-xs: calc(var(--space-unit) * 1);
  /*  8px */
  --space-sm: calc(var(--space-unit) * 2);
  /* 16px */
  --space-md: calc(var(--space-unit) * 3);
  /* 24px */
  --space-lg: calc(var(--space-unit) * 4);
  /* 32px */
  --space-xl: calc(var(--space-unit) * 6);
  /* 48px */
  --space-2xl: calc(var(--space-unit) * 8);
  /* 64px */
  --space-3xl: calc(var(--space-unit) * 10);
  /* 80px */
  --space-section: clamp(64px, 10vw, 120px);

  /* Layout */
  --max-width: 1280px;
  --side-padding: clamp(1.5rem, 4vw, 4rem);

  /* Borders & Radius */
  --radius-sm: 8px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-xl: 32px;
  --radius-pill: 100px;

  /* Transitions */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-fast: 0.2s;
  --dur-normal: 0.4s;
  --dur-slow: 0.7s;

  /* Z-Index Scale */
  --z-base: 1;
  --z-nav: 100;
  --z-overlay: 200;
  --z-modal: 300;
}