/* =====================================================================
 * REEL — GeekPress theme palette
 * The single source of truth for ALL --geekui-* variables.
 * Declared TWICE — on body AND on [id^="geekui-root"] — so the React
 * apps mounted by GeekPress inherit values even through host wrappers.
 * ===================================================================== */

@import url("https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,400;0,9..144,500;0,9..144,600;0,9..144,700;1,9..144,400;1,9..144,500&family=Inter:wght@400;500;600;700&family=DM+Mono:wght@400;500&display=swap");

/* ---------------------------------------------------------------------
 * DARK PALETTE — "midnight screening room" (default)
 * ------------------------------------------------------------------- */
body,
[id^="geekui-root"] {
  /* Canvas & text */
  --geekui-bg:               #0e0f13;
  --geekui-bg-2:             #15171d;
  --geekui-text:             #e9e7e1;
  --geekui-text-dim:         #b5b2a8;
  --geekui-text-mute:        #76746b;

  /* Accent — warm ember coral */
  --geekui-accent:           #ff6a4d;
  --geekui-accent-2:         #ff8c73;
  --geekui-accent-d:         #d9472e;

  /* Typography */
  --geekui-font-base:        "Inter", "Instrument Sans", system-ui, -apple-system, "Helvetica Neue", sans-serif;
  --geekui-font-title:       "Fraunces", "Cormorant Garamond", Georgia, serif;
  --geekui-font-mono:        "DM Mono", "Space Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  /* Surfaces & borders */
  --geekui-surface:          #1a1c22;
  --geekui-surface-2:        rgba(255, 106, 77, 0.10);
  --geekui-border:           rgba(233, 231, 225, 0.10);
  --geekui-border-strong:    rgba(255, 106, 77, 0.45);
  --geekui-modal-bg:         #15171d;
  --geekui-modal-text:       #e9e7e1;

  /* Card & effects */
  --geekui-card-radius:      8px;
  --geekui-card-shadow:      0 6px 18px rgba(0, 0, 0, 0.45);
  --geekui-card-hover-shadow: 0 14px 36px rgba(0, 0, 0, 0.55), 0 0 24px rgba(255, 106, 77, 0.18);
  --geekui-glow:             0 0 0 1px rgba(255, 106, 77, 0.4), 0 0 24px rgba(255, 106, 77, 0.25);

  /* Hero (over backdrop photo) */
  --geekui-hero-fade:        linear-gradient(180deg, rgba(14, 15, 19, 0.40) 0%, rgba(14, 15, 19, 0.78) 55%, rgba(14, 15, 19, 0.96) 100%);
  --geekui-hero-tint:        linear-gradient(110deg, rgba(255, 106, 77, 0.10) 0%, transparent 40%, rgba(20, 22, 30, 0.30) 100%);
  --geekui-hero-text-shadow: 0 2px 18px rgba(0, 0, 0, 0.85), 0 0 4px rgba(0, 0, 0, 0.6);

  /* Rating tone scale */
  --geekui-tone-exceptional: #ffd166;
  --geekui-tone-great:       #ff8c73;
  --geekui-tone-good:        #ff6a4d;
  --geekui-tone-mixed:       #c7a98f;
  --geekui-tone-poor:        #7d7a72;
  --geekui-tone-muted:       #4b4944;
}

/* ---------------------------------------------------------------------
 * LIGHT PALETTE — "gallery paper"
 * ------------------------------------------------------------------- */
body[data-theme="light"],
body[data-theme="light"] [id^="geekui-root"] {
  --geekui-bg:               #f6f4ef;
  --geekui-bg-2:             #ece9e1;
  --geekui-text:             #1a1b1f;
  --geekui-text-dim:         #4d4e54;
  --geekui-text-mute:        #807e78;

  --geekui-accent:           #d6442e;
  --geekui-accent-2:         #ef5a3e;
  --geekui-accent-d:         #b8371f;

  --geekui-surface:          #fffdf9;
  --geekui-surface-2:        rgba(214, 68, 46, 0.08);
  --geekui-border:           rgba(26, 27, 31, 0.10);
  --geekui-border-strong:    rgba(214, 68, 46, 0.45);
  --geekui-modal-bg:         #fffdf9;
  --geekui-modal-text:       #1a1b1f;

  --geekui-card-shadow:      0 6px 18px rgba(20, 18, 14, 0.08);
  --geekui-card-hover-shadow: 0 16px 36px rgba(20, 18, 14, 0.14), 0 0 18px rgba(214, 68, 46, 0.16);
  --geekui-glow:             0 0 0 1px rgba(214, 68, 46, 0.45), 0 0 18px rgba(214, 68, 46, 0.20);

  /* STRONG cream wash so backdrop photo fades to a ghost and dark hero
     text stays legible.  Light glow text-shadow halos the title. */
  --geekui-hero-fade:        linear-gradient(180deg, rgba(246, 244, 239, 0.85) 0%, rgba(246, 244, 239, 0.96) 55%, rgba(246, 244, 239, 0.99) 100%);
  --geekui-hero-tint:        linear-gradient(110deg, rgba(214, 68, 46, 0.06) 0%, transparent 40%, rgba(246, 244, 239, 0.4) 100%);
  --geekui-hero-text-shadow: 0 0 12px rgba(255, 253, 248, 0.95), 0 0 2px rgba(255, 253, 248, 1);

  /* Tone scale, darkened for ≥3:1 on paper */
  --geekui-tone-exceptional: #b8861a;
  --geekui-tone-great:       #c75634;
  --geekui-tone-good:        #d6442e;
  --geekui-tone-mixed:       #8a6f5a;
  --geekui-tone-poor:        #6b6960;
  --geekui-tone-muted:       #b3b0a8;
}

/* =====================================================================
 * LOADER — coral ring, drawn with ::after on the wrapper.
 *
 * The plugin's Loader.jsx mounts:
 *     <div class="geekfp-spinner">          ← wrapper (flex box)
 *        <svg class="geekfp-spinner geekfp-rotating">  ← the plugin's own icon
 *
 * Both nodes carry `.geekfp-spinner`, which is what broke the old rule: it
 * sized/spun BOTH, so the wrapper collapsed and the plugin's teal icon still
 * showed through. Here the inner icon is taken out of the flow entirely and a
 * ::after ring is drawn on the wrapper instead.
 *
 * NOT scoped to .geekui-container on purpose: the loader renders twice — once
 * at the app root on first load (before the container mounts) and again inside
 * the container for tab/pagination loads. A scoped selector misses the first
 * one and the raw icon leaks through.
 * ===================================================================== */
/* Layout rules must exclude the inner icon: it carries `.geekfp-spinner` as
   well, so an unqualified rule hands it the wrapper's min-height and the
   hidden icon silently stretches the loader box. */
.geekfp-spinner:not(.geekfp-rotating) {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 200px;
  position: relative;
  color: var(--geekui-accent);
}
.geekfp-spinner .geekfp-rotating {
  opacity: 0 !important;
  width: 0 !important;
  height: 0 !important;
  min-height: 0 !important;
  position: absolute !important;
}
.geekfp-spinner:not(.geekfp-rotating)::after {
  content: "";
  width: 42px;
  height: 42px;
  border: 3px solid transparent;
  border-top-color: var(--geekui-accent);
  border-right-color: var(--geekui-accent-2);
  border-radius: 50%;
  box-shadow: 0 0 22px var(--geekui-accent-d, transparent);
  animation: reel-spin 0.9s linear infinite;
}
@keyframes reel-spin { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
  .geekfp-spinner:not(.geekfp-rotating)::after { animation: none; }
}