/* ==========================================================================
   LOSS TRIP — DESIGN TOKENS
   Strict adherence to loss-trip-build-plan.md §3
   ========================================================================== */

:root {
  /* Core Brand Colors */
  --loss-cream:  #F6F1E7;
  --loss-ink:    #15130F;
  --loss-pink:   #FF2E7E;
  --loss-teal:   #14B8B4;
  --loss-yellow: #FFC94A;
  --loss-dusk:   #1B1730; /* photo-overlay gradient end, dark sections */

  /* Semantic Palettes */
  --color-bg-light: var(--loss-cream);
  --color-text-dark: var(--loss-ink);
  --color-bg-dark: #0D0A14;
  --color-card-dark: #161224;
  --color-border-dark: rgba(255, 255, 255, 0.1);
  --color-border-light: rgba(21, 19, 15, 0.12);

  /* Light Theme Badge Alternation */
  --badge-pink-bg: rgba(255, 46, 126, 0.12);
  --badge-pink-border: rgba(255, 46, 126, 0.25);
  --badge-teal-bg: rgba(20, 184, 180, 0.12);
  --badge-teal-border: rgba(20, 184, 180, 0.25);

  /* Typography */
  --font-display: 'Anton', sans-serif;           /* Wordmark + section H1/H2 only */
  --font-marker:  'Permanent Marker', cursive;    /* Emotional one-liners — max 2-3 uses/page */
  --font-body:    'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; /* Everything else */

  /* Shape & Radii */
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-card: 20px;
  --radius-lg: 28px;
  --radius-pill: 999px;

  /* Glassmorphism & Mesh */
  --glass-bg-dark: rgba(26, 22, 43, 0.65);
  --glass-bg-dark-hover: rgba(35, 30, 58, 0.85);
  --glass-bg-light: rgba(255, 255, 255, 0.7);
  --glass-border: rgba(255, 255, 255, 0.12);
  --glass-border-hover: rgba(255, 46, 126, 0.4);
  --glass-blur: 16px;

  /* Neon & Cyber Accents */
  --neon-pink: #FF2E7E;
  --neon-teal: #00F5D4;
  --neon-yellow: #FFE600;
  --neon-purple: #9D4EDD;

  /* Shadows & Depth */
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.06);
  --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 16px 40px rgba(0, 0, 0, 0.15);
  --shadow-ticket: 0 20px 50px rgba(0, 0, 0, 0.35), 0 0 40px rgba(255, 46, 126, 0.15);
  --shadow-ticket-hover: 0 30px 70px rgba(0, 0, 0, 0.45), 0 0 50px rgba(20, 184, 180, 0.25);
  --shadow-neon-pink: 0 0 25px rgba(255, 46, 126, 0.35), 0 0 50px rgba(255, 46, 126, 0.15);
  --shadow-neon-teal: 0 0 25px rgba(0, 245, 212, 0.35), 0 0 50px rgba(0, 245, 212, 0.15);
  --shadow-neon-yellow: 0 0 25px rgba(255, 230, 0, 0.35), 0 0 50px rgba(255, 230, 0, 0.15);

  /* Transitions & Springs */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-bounce: cubic-bezier(0.68, -0.6, 0.32, 1.6);
  --duration-fast: 180ms;
  --duration-normal: 300ms;
  --duration-slow: 600ms;

  /* Container */
  --container-max: 1200px;
  --container-pad: clamp(1.25rem, 5vw, 2.5rem);
}