/* ============ FULL BLACK THEME ============
   Loaded last. Flips the light design tokens to black surfaces with white
   type and red accents, then patches the few rules that hard-code a light
   assumption. Remove this file (and its <link>) to return to the light theme. */

:root {
  /* surfaces */
  --off-white: #000000;        /* alternating section surface → black */
  --white: #121212;            /* cards, inputs, chips on black */
  --light-gray: #1b1b1b;       /* placeholders, rails */
  --ink: #0b0b0b;              /* "dark" panels sit a hair above the page */

  /* type */
  --text-strong: #ffffff;
  --text-body: rgba(255, 255, 255, 0.78);
  --text-muted: rgba(255, 255, 255, 0.56);
  --slate: rgba(255, 255, 255, 0.7);

  /* lines */
  --line: rgba(255, 255, 255, 0.1);
  --line-strong: rgba(255, 255, 255, 0.2);

  --red-soft: rgba(225, 29, 42, 0.14);
}

html, body { background: #000; color: var(--text-body); }

/* sections that used the white token as their page colour */
.gallery,
.projects,
.yt { background: #000; }

/* a faint hairline keeps back-to-back black sections from merging */
main > div > .section { border-top: 1px solid rgba(255, 255, 255, 0.06); }

/* ---- Buttons ---- */
.btn--outline:hover { background: var(--red); border-color: var(--red); color: #fff; }
.btn--dark,
.btn--accent { background: #1c1c1c; }
.btn--dark:hover,
.btn--accent:hover { background: var(--red); }
.btn--on-dark { color: #000; }
.btn--ghost:hover { color: #000; }
.fab--top { background: #1c1c1c; border: 1px solid rgba(255, 255, 255, 0.14); }

/* ---- Cards lift off the black with a hairline instead of a shadow ---- */
.about__media,
.pstep__card,
.tcard,
.pfilter__chip { border-color: var(--line-strong); }
.tcard,
.pstep__card { border: 1px solid var(--line); }

/* ---- Interior: mobile active tab inverts to a white pill ---- */
@media (max-width: 900px) {
  .intr__tab.is-active { background: #fff; border-color: #fff; color: #000; }
}

/* ---- Contact: dark map so it doesn't glare ---- */
.contact__map iframe { filter: invert(0.92) hue-rotate(180deg) saturate(0.85); }

/* ---- Form fields ---- */
input, select, textarea { color: #fff; }
::placeholder { color: rgba(255, 255, 255, 0.4); }
select option { background: #121212; color: #fff; }

/* ---- Text selection ---- */
::selection { background: var(--red); color: #fff; }