/* ============ Vallejo Wing skin ============
   Loaded after style.css. Re-inks the shared layout vars
   to dark parchment + bronze, and repaints the rules that
   hardcode light-parchment colors. */

:root {
  --cream: #241d15;
  --cream-2: #1d1710;
  --ink: #f0e3c8;
  --ink-soft: #cdbb95;
  --teal: #c9973f;
  --teal-deep: #8a5c20;
  --coral: #e0704f;
  --gold: #d8a854;
  --shadow: 0 18px 40px rgba(0, 0, 0, 0.55);
}

body {
  background: linear-gradient(180deg, #2a2217 0%, var(--cream) 55%, var(--cream-2) 100%);
  color: var(--ink);
}

::selection { background: var(--coral); color: #1a120a; }

#grain { mix-blend-mode: screen; opacity: 0.07; }

.topbar {
  border-bottom: 1px solid rgba(240, 227, 200, 0.18);
  background: rgba(26, 20, 12, 0.85);
}
.topbar a { color: var(--ink); }
.topbar a:hover { color: var(--gold); }

.hero {
  background:
    radial-gradient(ellipse 90% 60% at 50% 115%, rgba(216, 168, 84, 0.22), transparent 65%),
    radial-gradient(ellipse 70% 50% at 85% -10%, rgba(138, 92, 32, 0.20), transparent 60%),
    linear-gradient(180deg, #322718 0%, var(--cream) 55%, var(--cream-2) 100%);
}
.hero h1 .accent { color: var(--gold); }

.btn-solid {
  background: var(--gold);
  color: #1a120a;
  box-shadow: 0 10px 24px rgba(216, 168, 84, 0.30);
}
.btn-solid:hover {
  box-shadow: 0 16px 32px rgba(216, 168, 84, 0.45);
  color: #1a120a;
}
.btn-ghost {
  border: 2px solid rgba(240, 227, 200, 0.45);
  color: var(--ink);
}
.btn-ghost:hover { background: var(--ink); color: #1a120a; }

.frame-tile {
  background: #14100a;
  border: 10px solid #3a2d1c;
  outline: 1px solid rgba(216, 168, 84, 0.35);
}
.frame:hover .frame-tile {
  box-shadow: 0 26px 60px rgba(0, 0, 0, 0.65);
}
.frame-row .motion-panel {
  border: 2px solid rgba(216, 168, 84, 0.35);
  background: #0f0c08;
  box-shadow: 0 10px 10px rgba(0, 0, 0, 0.45);
}

.section-film {
  background:
    radial-gradient(ellipse 60% 80% at 50% 0%, rgba(216, 168, 84, 0.10), transparent 70%),
    linear-gradient(180deg, var(--cream-2), var(--cream));
  border-top: 3px double rgba(240, 227, 200, 0.4);
  border-bottom: 3px double rgba(240, 227, 200, 0.4);
}

/* ---- contrast repairs ----
   The base sheet paints several components light-bg/dark-text
   through the swapped vars (cream as text color). Re-ink them
   for the dark theme so nothing sits dark-on-dark. */

.footer {
  background: #120e08;
  color: var(--ink);
  border-top: 1px solid rgba(240, 227, 200, 0.14);
}
.footer-note { color: var(--ink-soft); opacity: 0.8; }
.footer-link { color: var(--ink); opacity: 0.85; text-decoration: underline; text-underline-offset: 3px; }
.footer-link:hover { color: var(--gold); opacity: 1; }
.footer .to-top:hover { color: var(--gold); }

/* Marquee ticker: bronze band needs light text */
.marquee {
  color: #f0e3c8;
  border-top: 3px double rgba(240, 227, 200, 0.4);
  border-bottom: 3px double rgba(240, 227, 200, 0.4);
}

/* Expansion CTA hover fills gold; text must go dark, not light */
.expansion-cta:hover { color: #1a120a; }