/* Self-hosted UFOREA fonts (subset: latin) */

@font-face {
  font-family: 'Italianno';
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  src: url('../fonts/Italianno-400.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Playfair Display';
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  src: url('../fonts/PlayfairDisplay-700.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Poppins';
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  src: url('../fonts/Poppins-400.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Poppins';
  font-weight: 500;
  font-style: normal;
  font-display: swap;
  src: url('../fonts/Poppins-500.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Poppins';
  font-weight: 600;
  font-style: normal;
  font-display: swap;
  src: url('../fonts/Poppins-600.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Poppins';
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  src: url('../fonts/Poppins-700.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ════════════════ Design Tokens ════════════════ */
:root {
  /* Signature */
  --uforea-yellow: #FFBA01;
  --yellow-deep:   #E0A300;
  --yellow-soft:   #FFF1C7;
  --gold-text:    #A77400;  /* WCAG-safe gold for text on light pastel bg */

  /* ── UFOREA logo accents — the wordmark's letters ──
   * The "O" (gold = --uforea-yellow above) is the signature/primary. The other
   * five letters form the secondary accent rainbow; each zone wears one (wired
   * in zone.css). Three layers per hue: the mid-tone here (bold touches — frame
   * outlines, dots, chips), the pale *wash* below (large section fills), and a
   * WCAG-safe *-text twin (coloured text on white/wash). */
  --logo-coral:    #F77984;  /* U */
  --logo-salmon:   #F38065;  /* F */
  --logo-green:    #92CE78;  /* R */
  --logo-sky:      #71C5F1;  /* E */
  --logo-lavender: #BB8DCD;  /* A */

  /* WCAG-safe text twins for the accents above (coloured text on white/wash) */
  --passion-text:      #B82530;  /* coral letter  → safe red */
  --playful-text:      #B5440D;  /* salmon letter → safe orange */
  --generous-text:     #1F6B53;  /* green letter  → safe green */
  --trustworthy-text:  #1F5FCC;  /* sky letter    → safe blue */
  /* Canvas + text — warm dark greys (client round 2026-07: avoid pure/cool
   * black. Headings softened 2026-07-05 from #2F2A28 (near-black, 12.7:1) to
   * #4A4542 (~7.9:1 on white) so titles read as a clearly soft, premium warm
   * grey — the client still perceived the old near-black as "black". Title
   * hierarchy is now carried by the Playfair serif + size, not by darkness.
   * --ink-strong doubles as title + emphasis + button-text colour; on the
   * yellow buttons it still clears WCAG AA (~5:1). */
  --paper:         #FFFFFF;
  --cream:         #FFFBF3;
  --ink:           #4A4542;
  --ink-strong:    #4A4542;
  --mute:         #6E6560;  /* warm twin of the old #6B6B6B — WCAG AA on white */

  /* Pastel washes — pale tints of the logo accents (large section fills) */
  --blush:         #F9E4E6;  /* coral wash    (logo U) */
  --lavender:      #F3E4F9;  /* lavender wash (logo A) */
  --mint:          #EAF9E4;  /* green wash    (logo R) */
  --sky:           #E4F2F9;  /* sky wash      (logo E) */
  --peach:         #F9E8E4;  /* salmon wash   (logo F) */

  /* Saturated utility hues (kept for the few semantic uses; the dormant
   * --positive [dup of yellow], --playful and --trustworthy were retired —
   * the logo accents above are now the canonical colour rainbow) */
  --passion:       #E63946;  /* alert red — woo errors, venue sticker */
  --generous:      #43AA8B;  /* success green — woo message + promo borders */
  --imaginative:   #8338EC;  /* purple — doubles as WCAG-safe purple text (5.6:1 on white) */

  /* Util */
  --success:       #66E79F;
  --alert:         #EB1B1B;

  --shadow-soft: 0 8px 30px rgba(74,69,66,.08);
  --shadow-card: 0 4px 18px rgba(74,69,66,.06);

  /* Shape scale — one governed set of radii (client round 2026-07: "standardise
   * the shapes of the frame/button"). Buttons/pills are always --r-pill; content
   * cards --r-card; rectangular photo frames --r-photo; small chips/thumbs
   * --r-chip. The intentional organic per-zone frames and the tilted polaroids
   * are deliberate wonderland motifs and stay as-is. */
  --r-pill:  999px;
  --r-card:  16px;
  --r-photo: 14px;
  --r-chip:  8px;

  /* One governed content-card frame (2026-07 consistency pass) — every non-emphasis
   * white/tinted content card uses this soft gold edge. Heavier/fuller borders are
   * reserved for deliberately-emphasised cards (featured membership, hour/rate). */
  --card-frame: 1px solid rgba(255, 186, 1, .5);
  /* Vertical rhythm — ONE responsive value for every full-width content band so the
   * gaps between sections are uniform on every viewport (2026-07 spacing sweep).
   * ~56px on phones, ramping to ~90px on desktop; no per-section media overrides. */
  --section-y:   clamp(40px, 4.5vw, 64px);
  /* Inner-page hero band — consistent breadcrumb→hero (top) and hero→content
   * (bottom) gap across every template. */
  --hero-top:    clamp(20px, 3vw, 34px);
  --hero-bottom: clamp(30px, 4.5vw, 52px);
}

/* ════════════════ Reset + Base ════════════════ */
* { box-sizing: border-box; }
/* Keyboard accessibility — visible focus rings on all interactive elements */
:focus { outline: none; }
:focus-visible {
  outline: 3px solid var(--uforea-yellow);
  outline-offset: 2px;
  border-radius: 4px;
}
.btn:focus-visible,
.icon-btn:focus-visible,
.wa-fab:focus-visible {
  outline-offset: 4px;
}
html, body { margin: 0; padding: 0; }
html { scroll-behavior: smooth; }

body {
  font-family: 'Poppins', system-ui, sans-serif;
  color: var(--ink);
  background: var(--paper);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  font-size: 16px;
  overflow-x: hidden;
  overflow-wrap: break-word; /* long words/URLs/headings wrap instead of overflowing the 92% container (else clipped by overflow-x:hidden on mobile) */
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; border: 0; background: none; color: inherit; }

.serif   { font-family: 'Playfair Display', Georgia, serif; letter-spacing: -0.01em; }
.script  { font-family: 'Italianno', cursive; font-weight: 400; line-height: 1; }

.container { width: min(1240px, 92%); margin: 0 auto; }

/* Screen-reader only utility */
.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* Respect prefers-reduced-motion — disable all animation + transition globally */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .reveal { opacity: 1 !important; transform: none !important; }
}