/**
 * DESIGN TOKENS
 */

/* Custom Font - Kleber Stark (Licensed) */
@font-face {
  font-family: 'Kleber';
  src:
    url('/assets/fonts/Kleber/WOFF/Kleber-Stark.woff2') format('woff2'),
    url('/assets/fonts/Kleber/WOFF/Kleber-Stark.woff') format('woff'),
    url('/assets/fonts/Kleber/OTF/Kleber-Stark.otf') format('opentype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

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

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

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

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

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

:root {
  color-scheme: light;

  /* ==========================================
     COLORS - NIGHTCLUB PALETTE
     ========================================== */

  /* Backgrounds */
  --bg-primary: #ffffff;
  --bg-secondary: #f5f2eb;
  --bg-card: #ffffff;
  --bg-card-light: #ffffff;
  --bg-overlay: rgba(0, 0, 0, 0.6);

  /* Accent - Brand Lime Green */
  /* NOTE: Also update .form-select SVG in components.css when changing accent */
  --accent: #e1ff00;
  --accent-rgb: 225, 255, 0;
  --accent-hover: #eaff4d;
  --accent-dark: #b4cc00;

  /* Secondary accent - Hot Pink for variety */
  --pink: #ff1493;
  --pink-glow: rgba(255, 20, 147, 0.4);

  /* Text Colors */
  --text-primary: #1a1a1a;
  --text-secondary: #666666;
  --text-muted: #999999;
  --text-on-accent: #000000;
  --text-dark: #000000;

  /* Borders */
  --border-color: #e0ddd6;
  --border-light: rgba(0, 0, 0, 0.06);

  /* Status */
  --success: #00d26a;
  --error: #dc2626;
  --warning: #ffb800;

  /* Star Rating */
  --star-color: #ffb800;

  /* ==========================================
     TYPOGRAPHY - BOLD & CONDENSED
     ========================================== */

  /* Font Families */
  --font-display: 'Kleber', 'Anton', 'Impact', sans-serif;
  --font-body: 'Graphik', 'Barlow', 'Helvetica Neue', sans-serif;
  --font-mono: 'JetBrains Mono', monospace;

  /* Font Sizes */
  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.25rem;
  --text-2xl: 1.5rem;
  --text-3xl: 2rem;
  --text-4xl: 2.5rem;
  --text-5xl: 3.5rem;
  --text-6xl: 5rem;
  --text-7xl: 7rem;
  --text-hero: 10rem;

  /* Font Weights */
  --font-normal: 400;
  --font-medium: 500;
  --font-semibold: 600;
  --font-bold: 700;

  /* Line Heights */
  --leading-none: 0.9;
  --leading-tight: 1;
  --leading-normal: 1.5;
  --leading-relaxed: 1.7;

  /* Letter Spacing */
  --tracking-tight: -0.02em;
  --tracking-normal: 0;
  --tracking-wide: 0.02em;
  --tracking-wider: 0.05em;
  --tracking-widest: 0.1em;

  /* ==========================================
     SPACING
     ========================================== */

  --space-0: 0;
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;
  --space-32: 8rem;

  --section-padding: var(--space-16);
  --section-padding-lg: var(--space-24);

  /* ==========================================
     LAYOUT
     ========================================== */

  --container-max: 1400px;
  --container-narrow: 900px;
  --container-padding: var(--space-6);
  --header-height: 72px;

  /* ==========================================
     BORDERS & RADIUS
     ========================================== */

  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 24px;
  --radius-xl: 33px;
  --radius-full: 9999px;

  --border-thin: 1px;
  --border-thick: 2px;

  /* ==========================================
     SHADOWS & EFFECTS
     ========================================== */

  --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.06);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);
  --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12);
  --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.14);

  --glow-accent: 0 0 30px rgba(var(--accent-rgb), 0.4);
  --glow-pink: 0 0 40px rgba(255, 20, 147, 0.3);

  /* ==========================================
     TRANSITIONS
     ========================================== */

  --transition-fast: 150ms ease;
  --transition-base: 300ms ease;
  --transition-slow: 500ms ease;

  --ease-out-expo: cubic-bezier(0.19, 1, 0.22, 1);
  --ease-out-back: cubic-bezier(0.34, 1.56, 0.64, 1);

  /* ==========================================
     Z-INDEX
     ========================================== */

  --z-base: 0;
  --z-dropdown: 100;
  --z-sticky: 200;
  --z-fixed: 300;
  --z-header: 1100;
  --z-mobile-menu: 1000;
  --z-overlay: 1200;
}

/* ==========================================
   DISPLAY-P3 WIDE GAMUT OVERRIDES
   Pushed beyond sRGB for maximum vibrancy
   on supported displays
   ========================================== */

@supports (color: color(display-p3 1 1 1)) {
  :root {
    /* Brand accent colors use exact sRGB values (defined above)
       — the browser converts them to P3 automatically.
       No override here to preserve brand consistency. */

    /* Secondary accent - Hot Pink (wider gamut) */
    --pink: color(display-p3 1 0 0.56);
    --pink-glow: color(display-p3 1 0 0.56 / 0.4);

    /* Status (wider gamut) */
    --success: color(display-p3 0 0.87 0.38);
    --warning: color(display-p3 1 0.74 0);

    /* Star Rating (wider gamut) */
    --star-color: color(display-p3 1 0.74 0);

    /* Glows (wider gamut) */
    --glow-pink: 0 0 40px color(display-p3 1 0 0.56 / 0.3);
  }
}