/* ============================================
   Aloha Beach Festival - Design Tokens
   Colors pulled from official banner artwork
   ============================================ */

:root {
  /* === Banner-Matched Color Palette === */
  /* Sky & Warm tones (from banner sky/sun) */
  --color-sky-orange: #F5A623;
  --color-sunset-orange: #E8951D;
  --color-sunset-gold: #F7C948;
  --color-amber: #D4A017;
  --color-coral: #FF8F6B;

  /* Ocean & Cool tones (from banner waves/logo) */
  --color-ocean-teal: #0099CC;
  --color-cyan: #00BCD4;
  --color-lagoon: #48BFE3;
  --color-sky-blue: #83C5E8;
  --color-ocean-medium: #0077B6;
  --color-ocean-deep: #023E8A;
  --color-deep-navy: #0A1628;

  /* Neutrals */
  --color-sand: #D4A76A;
  --color-sand-light: #FFF9F0;
  --color-cream: #FFF8F0;
  --color-page-blue: #EAF6FB;
  --color-page-blue-alt: #D4EEF7;

  /* Mapped colors (compatibility) */
  --color-primary-blue: var(--color-ocean-teal);
  --color-dark-blue: var(--color-ocean-deep);
  --color-deep-teal: #005F73;
  --color-primary-gold: var(--color-sunset-gold);
  --color-dark-gold: #C49A15;
  --color-light-blue: #D4EEF7;
  --color-warm-gray: var(--color-page-blue);
  --color-white: #FFFFFF;
  --color-charcoal: #2D2D2D;
  --color-light-gray: #E0E0E0;
  --color-text-muted: #555555;
  --color-text-light: #666666;
  --color-text-lighter: #777777;
  --color-error: #D32F2F;
  --color-success: #2E7D32;
  --color-palm-green: #2D6A4F;
  --color-tropical-pink: #E63946;

  /* Typography */
  --font-display: 'Pacifico', cursive;
  --font-heading: 'Poppins', sans-serif;
  --font-body: 'Inter', sans-serif;

  /* Font sizes */
  --font-size-hero: 3.5rem;
  --font-size-h1: 2.5rem;
  --font-size-h2: 2rem;
  --font-size-h3: 1.5rem;
  --font-size-h4: 1.25rem;
  --font-size-body: 1rem;
  --font-size-small: 0.875rem;
  --font-size-caption: 0.75rem;

  /* Font weights */
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  /* Spacing - 8px base grid */
  --space-xs: 0.25rem;
  --space-sm: 0.5rem;
  --space-md: 1rem;
  --space-lg: 2rem;
  --space-xl: 3rem;
  --space-2xl: 4rem;
  --space-3xl: 6rem;

  /* Layout */
  --max-width: 1100px;
  --header-height: 80px;

  /* Border radius */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 20px;
  --radius-2xl: 28px;
  --radius-full: 9999px;

  /* Shadows */
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.06);
  --shadow-md: 0 2px 8px rgba(0, 0, 0, 0.08);
  --shadow-lg: 0 4px 16px rgba(0, 0, 0, 0.12);
  --shadow-xl: 0 8px 32px rgba(0, 0, 0, 0.16);
  --shadow-glow-orange: 0 0 20px rgba(245, 166, 35, 0.3);
  --shadow-glow-teal: 0 0 20px rgba(0, 153, 204, 0.3);
  --shadow-glow-gold: 0 0 20px rgba(247, 201, 72, 0.3);

  /* Transitions */
  --transition-fast: 150ms ease;
  --transition-base: 250ms ease;
  --transition-slow: 400ms ease;
  --transition-bounce: 400ms cubic-bezier(0.34, 1.56, 0.64, 1);
}