/*
 * ogace-vibe-clean.css — "Clean" theme mode for the Vibe skin.
 *
 * Airbnb / TripAdvisor inspired: white surfaces, one confident accent,
 * soft card shadows instead of neon glow, generous rounded corners,
 * plain sans-serif type. Loads AFTER vibe.css and overrides the same
 * --ogv-* design tokens, so every component vibe.css already styles
 * (header, cards, footer, bottom nav, buttons, pills) re-skins for free
 * with zero markup changes. The cyberpunk skin is untouched — this is
 * an additive alternate, not a replacement.
 *
 * Toggle: OGACE_NET_VIBE_THEME (wp-config.php or filter
 * 'ogace_vibe_theme_mode') = 'clean' (default) | 'cyberpunk'.
 *
 * @package OGACE_Network
 */

:root,
[data-vibe-theme] {
  /* ---- Base surfaces & ink -------------------------------------- */
  --ogv-navy-deep:   #ffffff;
  --ogv-navy:        #ffffff;
  --ogv-navy-2:      #f7f7f7;
  --ogv-paper:       #ffffff;
  --ogv-ink:         #222222;

  /* ---- Accent: Airbnb-style coral (primary) + TripAdvisor teal (secondary) */
  --ogv-gold:        #ff385c;   /* primary accent — CTAs, active states, price */
  --ogv-gold-bright: #e61e4d;   /* hover/pressed */
  --ogv-cyan:        #00af87;   /* secondary accent — ratings, success, links */
  --ogv-magenta:     #ff385c;
  --ogv-mint:        #00af87;
  --ogv-warn:        #d93900;
  --ogv-grid:        rgba(0, 0, 0, 0.06);

  /* ---- No neon glow in clean mode — soft elevation instead -------- */
  --ogv-glow-gold:   0 6px 16px rgba(0, 0, 0, 0.12);
  --ogv-glow-cyan:   0 2px 6px rgba(0, 0, 0, 0.08);

  /* ---- Motion: quicker, no lingering aurora drift ----------------- */
  --ogv-t-fast:      140ms;
  --ogv-t-base:      220ms;
  --ogv-t-slow:      320ms;
  --ogv-ease:        cubic-bezier(0.2, 0.8, 0.2, 1);

  /* ---- Airbnb/TripAdvisor geometry: big soft rounding, roomy gaps - */
  --ogv-radius:      12px;
  --ogv-radius-pill: 999px;
  --ogv-gap:         20px;

  /* ---- Plain, highly-legible type — no monospace HUD font --------- */
  --ogv-font-mono:   'Inter', system-ui, -apple-system, sans-serif;
  --ogv-font-sans:   'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;

  color-scheme: light;
}

body {
  background: #ffffff;
  color: var(--ogv-ink);
}

/* ---------------------------------------------------------------------
 * Header — Airbnb-style: white, sticky, soft bottom border instead of
 * the HUD ticker glow; search collapses into a rounded grey "pill".
 * ------------------------------------------------------------------- */
.vibe-header {
  background: #ffffff;
  border-bottom: 1px solid #ebebeb;
  box-shadow: none;
}

.vibe-ticker {
  background: #fff8f6;
  color: var(--ogv-gold-bright);
  border-bottom: 1px solid #ffe4e9;
}

.vibe-search {
  background: #ffffff;
  border: 1px solid #dddddd;
  border-radius: var(--ogv-radius-pill);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
}
.vibe-search:focus-within {
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.18);
  border-color: #b0b0b0;
}

.vibe-brand-mark {
  background: var(--ogv-gold);
  color: #fff;
  box-shadow: none;
}

/* ---------------------------------------------------------------------
 * Cards — TripAdvisor-style: white card, thin border, rating pill,
 * soft hover-lift shadow instead of a coloured spine/glow.
 * ------------------------------------------------------------------- */
.vibe-card,
[class*="vibe-card"] {
  background: #ffffff;
  border: 1px solid #ebebeb;
  border-radius: var(--ogv-radius);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
  transition: box-shadow var(--ogv-t-base) var(--ogv-ease),
              transform var(--ogv-t-base) var(--ogv-ease);
}
.vibe-card:hover,
[class*="vibe-card"]:hover {
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.14);
  transform: translateY(-2px);
}

/* Rating chip — TripAdvisor green circles idiom */
.vibe-rating,
.vibe-fed-code {
  background: var(--ogv-cyan);
  color: #fff;
  border-radius: var(--ogv-radius-pill);
}

/* ---------------------------------------------------------------------
 * Buttons — Airbnb solid-coral primary / outline secondary.
 * ------------------------------------------------------------------- */
.vibe-btn {
  border-radius: var(--ogv-radius-pill);
  font-weight: 600;
  box-shadow: none;
}
.vibe-btn-pill {
  background: var(--ogv-gold);
  color: #fff;
  border: none;
}
.vibe-btn-pill:hover { background: var(--ogv-gold-bright); }

.vibe-icon-btn {
  background: transparent;
  color: #222;
}
.vibe-icon-btn:hover { background: #f7f7f7; }

/* ---------------------------------------------------------------------
 * Footer — quiet neutral panel, no dark "island" seam; keeps the same
 * .ogace-frame utility class working, just re-tokened to a light card.
 * ------------------------------------------------------------------- */
.vibe-footer {
  background: #f7f7f7;
  color: #6a6a6a;
  border-top: 1px solid #ebebeb;
}
.vibe-footer-org { color: var(--ogv-ink); }
.vibe-fed-item { --fed-color: var(--ogv-cyan); }
.vibe-pay-chip {
  background: #ffffff;
  border: 1px solid #dddddd;
  color: #222;
}

/* Bottom mobile nav — Airbnb-app style: white bar, coral active state */
.vibe-bnav {
  background: #ffffff;
  border-top: 1px solid #ebebeb;
  box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.04);
}
.vibe-bnav-item { color: #717171; }
.vibe-bnav-item.is-active,
.vibe-bnav-item:hover { color: var(--ogv-gold); }
.vibe-bnav-fab {
  background: var(--ogv-gold);
  color: #fff;
  border-radius: 50%;
  box-shadow: 0 4px 10px rgba(255, 56, 92, 0.35);
}

/* ---------------------------------------------------------------------
 * .ogace-frame utility (shared header/body/footer "framed surface"
 * pattern from ogace-frame-layout.php) — re-token to the clean palette
 * so partner-accent overrides still work via CSS custom properties.
 * ------------------------------------------------------------------- */
.ogace-frame {
  background: #ffffff;
  border: 1px solid #ebebeb;
  border-radius: var(--ogv-radius);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}
.ogace-frame::before {
  background: linear-gradient(
    90deg,
    var(--oga-frame-accent-start, var(--ogv-gold)),
    var(--oga-frame-accent-end, var(--ogv-cyan))
  );
}
.ogace-frame--flat { box-shadow: none; border-color: #ebebeb; }