/**
 * H2O Pool Party — "Sunset Nirvana" design tokens
 * Source of truth: design-system/h2o-pool-party/MASTER.md
 * Day = aqua on sky. Golden hour = sunset coral (CTA ONLY). Night = neon on deep ocean.
 */

:root {
  /* Color — day */
  --h2o-primary: #0284C7;
  --h2o-on-primary: #FFFFFF;
  --h2o-secondary: #06B6D4;
  --h2o-background: #F0F9FF;
  --h2o-foreground: #0F172A;
  --h2o-foreground-soft: #334155;
  --h2o-muted: #EFF7FB;
  --h2o-border: #DCEBF5;

  /* Color — conversion (CTA only, never decorative) */
  --h2o-accent: #FF6B35;
  --h2o-accent-2: #F43F5E;
  --h2o-accent-hover: #EA580C;

  /* Color — night */
  --h2o-night: #0B1B33;
  --h2o-night-deep: #071021;
  --h2o-neon: #22D3EE;
  --h2o-magenta: #E11D8F;
  --h2o-violet: #7C3AED;
  --h2o-fg-dark: #F8FAFC;
  --h2o-fg-dark-muted: #C3D2E5;
  --h2o-border-night: rgba(34, 211, 238, .25);

  /* Misc */
  --h2o-destructive: #DC2626;
  --h2o-ring: #0284C7;

  /* Type — matched to tripdust.com: Fraunces 600 / -0.01em headings, Outfit body */
  --h2o-font-display: 'Fraunces', Georgia, serif;
  --h2o-font-body: 'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --h2o-display-weight: 600;
  --h2o-display-tracking: -0.01em;

  /* Spacing */
  --h2o-space-xs: 4px;
  --h2o-space-sm: 8px;
  --h2o-space-md: 16px;
  --h2o-space-lg: 24px;
  --h2o-space-xl: 32px;
  --h2o-space-2xl: 48px;
  --h2o-space-3xl: 64px;

  /* Radii */
  --h2o-radius: 20px;
  --h2o-radius-sm: 12px;
  --h2o-radius-pill: 999px;

  /* Shadow & glow */
  --h2o-shadow-sm: 0 1px 2px rgba(0, 0, 0, .05);
  --h2o-shadow-md: 0 8px 30px rgba(2, 132, 199, .10);
  --h2o-shadow-lg: 0 16px 40px rgba(2, 132, 199, .18);
  --h2o-shadow-cta: 0 10px 30px rgba(244, 63, 94, .45);

  /* Gradients */
  --h2o-gradient-hero:
    radial-gradient(900px 420px at 85% -10%, rgba(255, 107, 53, .75), transparent 60%),
    radial-gradient(700px 500px at 110% 40%, rgba(225, 29, 143, .45), transparent 65%),
    radial-gradient(1000px 700px at -15% 110%, rgba(34, 211, 238, .55), transparent 60%),
    linear-gradient(160deg, #0284C7 0%, #2563EB 35%, #7C3AED 68%, #4C1D95 100%);
  --h2o-gradient-cta: linear-gradient(135deg, #FF6B35, #F43F5E);
  --h2o-gradient-dusk: linear-gradient(150deg, #F97316, #E11D8F 70%, #7C3AED);
  --h2o-gradient-night:
    radial-gradient(700px 300px at 20% 0%, rgba(124, 58, 237, .35), transparent 60%),
    radial-gradient(600px 300px at 85% 100%, rgba(225, 29, 143, .28), transparent 60%),
    linear-gradient(180deg, #0B1B33, #071021);

  /* Motion */
  --h2o-ease: cubic-bezier(.22, .61, .36, 1);
  --h2o-dur: 250ms;
}

/* ── Base component classes (shared across all H2O pages) ── */

.h2o-btn {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  border-radius: var(--h2o-radius-pill);
  padding: 15px 32px;
  font-family: var(--h2o-font-body);
  font-size: 16.5px;
  font-weight: 800;
  text-decoration: none;
  cursor: pointer;
  border: 0;
  transition: transform var(--h2o-dur) var(--h2o-ease), box-shadow var(--h2o-dur) var(--h2o-ease), background var(--h2o-dur) var(--h2o-ease);
}
.h2o-btn svg { width: 18px; height: 18px; }

.h2o-btn--cta {
  background: var(--h2o-gradient-cta);
  color: #fff;
  box-shadow: var(--h2o-shadow-cta);
}
.h2o-btn--cta:hover { transform: translateY(-2px); box-shadow: 0 14px 36px rgba(244, 63, 94, .55); color: #fff; }

.h2o-btn--glass {
  background: rgba(255, 255, 255, .14);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border: 1.5px solid rgba(255, 255, 255, .5);
  color: #fff;
}
.h2o-btn--glass:hover { background: rgba(255, 255, 255, .24); transform: translateY(-2px); color: #fff; }

.h2o-btn--outline {
  background: transparent;
  border: 2px solid var(--h2o-primary);
  color: var(--h2o-primary);
}
.h2o-btn--outline:hover { background: var(--h2o-primary); color: #fff; }

.h2o-card-day {
  background: rgba(255, 255, 255, .65);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border: 1px solid rgba(255, 255, 255, .9);
  border-radius: var(--h2o-radius);
  box-shadow: var(--h2o-shadow-md);
  transition: transform var(--h2o-dur) var(--h2o-ease), box-shadow var(--h2o-dur) var(--h2o-ease);
}
.h2o-card-day:hover { transform: translateY(-5px); box-shadow: var(--h2o-shadow-lg); }

.h2o-card-night {
  background: rgba(255, 255, 255, .05);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border: 1px solid var(--h2o-border-night);
  border-radius: var(--h2o-radius);
  transition: border-color var(--h2o-dur) var(--h2o-ease), transform var(--h2o-dur) var(--h2o-ease);
}
.h2o-card-night:hover { border-color: rgba(34, 211, 238, .65); transform: translateY(-4px); }
.h2o-card-night h3 { color: #fff; text-shadow: 0 0 18px rgba(34, 211, 238, .55); }

.h2o-input {
  padding: 12px 16px;
  border: 1px solid var(--h2o-border);
  border-radius: var(--h2o-radius-sm);
  font-size: 16px;
  font-family: var(--h2o-font-body);
  transition: border-color 200ms ease;
  width: 100%;
}
.h2o-input:focus {
  border-color: var(--h2o-primary);
  outline: none;
  box-shadow: 0 0 0 3px rgba(2, 132, 199, .13);
}

/* Focus visibility (a11y) */
.h2o-btn:focus-visible,
.h2o-input:focus-visible,
a:focus-visible {
  outline: 3px solid var(--h2o-ring);
  outline-offset: 2px;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .h2o-btn, .h2o-card-day, .h2o-card-night { transition: none; }
  .h2o-reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
}