/* ============================================================
   Clip Engine — Light mode override
   Loads AFTER styles.css. Re-tokens the palette to a warm
   editorial "cream paper" aesthetic and patches the handful of
   places where dark values were hardcoded.
   ============================================================ */

:root {
  --paper: #f4ecd8;
  --paper-raised: #fbf4e2;
  --ink: #2a2520;
  --ink-bright: #0d0b08;
  --ink-muted: rgba(42, 37, 32, 0.64);
  --ink-faint: rgba(42, 37, 32, 0.42);
  --ink-ghost: rgba(42, 37, 32, 0.16);
  --gold: #9a7a1f;
  --gold-soft: rgba(154, 122, 31, 0.32);
  --gold-glow: rgba(154, 122, 31, 0.08);
  --rule: rgba(42, 37, 32, 0.14);
}

/* html has a hardcoded #000 */
html { background: #eae0c6; }
body { background: var(--paper); color: var(--ink); }

::selection { background: var(--gold); color: #fff9e6; }

/* ===== Masthead ============================================== */
.masthead {
  background: rgba(244, 236, 216, 0.78);
  border-bottom: 1px solid var(--rule);
}
.masthead__cta {
  color: #2a1f04 !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.55),
    inset 0 -1px 0 rgba(0, 0, 0, 0.08),
    0 1px 0 rgba(60, 46, 10, 0.18),
    0 0 0 1px rgba(154, 122, 31, 0.55);
}
.masthead__cta:hover {
  background: #c19a27;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.6),
    inset 0 -1px 0 rgba(0, 0, 0, 0.08),
    0 10px 26px rgba(154, 122, 31, 0.32),
    0 0 0 1px rgba(154, 122, 31, 0.7);
}

/* ===== Cover ================================================= */
.cover__bg {
  background:
    radial-gradient(900px 600px at 78% 5%, rgba(154, 122, 31, 0.10), transparent 55%),
    radial-gradient(700px 600px at 12% 92%, rgba(60, 110, 200, 0.05), transparent 60%),
    linear-gradient(180deg, #f5ecd5, #ece0c2);
}
.cover__grain {
  background-image:
    repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.35) 0 1px, transparent 1px 3px);
  mix-blend-mode: multiply;
  opacity: 0.05;
}
.cover__anchor {
  background: rgba(42, 37, 32, 0.035);
}

/* ===== Offer band ============================================ */
.offer-band {
  background:
    linear-gradient(90deg, rgba(154, 122, 31, 0.10), rgba(154, 122, 31, 0.03) 60%, transparent),
    var(--paper);
  border-top: 1px solid var(--gold-soft);
}
.offer-band__cta:hover {
  background: var(--gold);
  color: #fff9e6;
}

/* ===== Cases (thumbnails stay dark — videos read better) ===== */
.case__badge {
  background: rgba(251, 244, 226, 0.75);
  border: 1px solid color-mix(in srgb, var(--badge, #9a7a1f) 55%, transparent);
  /* keep --badge color for the letters — it pops on cream */
}
.case__play {
  background: rgba(251, 244, 226, 0.82);
  border: 1px solid var(--ink-ghost);
  color: var(--ink-bright);
}
.case:hover .case__poster {
  box-shadow:
    0 0 0 1px var(--badge, var(--gold-soft)),
    0 14px 36px rgba(60, 46, 10, 0.22);
}
.case:hover .case__play {
  background: var(--gold);
  color: #fff9e6;
  border-color: var(--gold);
}

/* ===== Tiers, fit, ledger inherit from tokens =============== */

/* ===== Submit (form) ======================================== */
.field input, .field textarea {
  background: #fffaec;
  color: var(--ink-bright);
  border: 1px solid var(--rule);
}
.field input:hover, .field textarea:hover {
  border-color: rgba(42, 37, 32, 0.26);
}
.field input:focus, .field textarea:focus {
  background: #fffdf4;
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(154, 122, 31, 0.18);
}
.filing {
  box-shadow: 0 18px 50px rgba(60, 46, 10, 0.10);
}
.filing__submit {
  color: #2a1f04;
}
.filing__submit:hover {
  background: #c19a27;
  box-shadow: 0 10px 28px rgba(154, 122, 31, 0.28);
}
.filing__status--ok {
  background: rgba(46, 139, 87, 0.10);
  border: 1px solid rgba(46, 139, 87, 0.38);
  color: #2f6d48;
}
.filing__status--err {
  background: rgba(180, 36, 56, 0.08);
  border: 1px solid rgba(180, 36, 56, 0.4);
  color: #9a2436;
}

/* ===== Fit columns (slightly warmer for contrast) =========== */
.fit__col {
  background: var(--paper-raised);
  border: 1px solid var(--rule);
}
.fit__label--yes { color: #2f8f5a; }
.fit__label--no  { color: #b42438; }
.fit__col:first-child .fit__list li::before { color: #2f8f5a; }
.fit__col:last-child  .fit__list li::before { color: #b42438; }

/* ===== Closing ============================================== */
.closing__cta {
  border: 1px solid var(--ink-ghost);
  color: var(--ink-bright);
}
.closing__cta:hover {
  border-color: var(--gold);
  color: var(--gold);
  background: var(--gold-glow);
}

/* ===== Modal (keep cinematic-dark for video playback) ======= */
.modal {
  background: rgba(20, 16, 10, 0.82);
}
.modal__close {
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: rgba(255, 255, 255, 0.72);
}
.modal__close:hover { color: #fff; border-color: #fff; }
.modal__case { color: #d6b34a; }
.modal__hook { color: rgba(255, 255, 255, 0.85); }

/* Theme toggle inherits from styles.css via CSS custom properties. */

/* ===== Case study / source card / post — light overrides ===== */
.source-card:hover {
  box-shadow: 0 10px 28px rgba(60, 46, 10, 0.12);
}
.post__avatar {
  background: linear-gradient(135deg, #c19a27, #7a601a);
  color: #fff9e6;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4);
}
.post__actions span:not([aria-hidden]):hover { color: var(--ink-bright); }
.pack__clip:hover .case__poster {
  box-shadow:
    0 0 0 1px var(--badge, var(--gold-soft)),
    0 14px 36px rgba(60, 46, 10, 0.18);
}