/* ─────────────────────────────────────
   ADK Media: shared design tokens and base rules.
   Loaded by every page before its own <style>, so a token changed here
   changes everywhere. Page-specific styling stays inline in each page.
───────────────────────────────────── */
:root {
  --bg:           #080808;
  --bg-1:         #0f0f0f;
  --bg-2:         #141414;
  --surface:      rgba(255,255,255,0.03);
  --border:       rgba(255,255,255,0.07);
  --border-hi:    rgba(255,255,255,0.13);
  --accent:       #C9B5F0;
  --accent-light: #DDD0F7;
  --accent-dim:    rgba(201,181,240,0.12);
  --accent-glow:   rgba(201,181,240,0.06);
  --text:         #ffffff;
  --text-2:       #888888;
  /* Quietest text tier. Still clears 4.5:1 on --bg and --bg-1. */
  --text-3:       #7e7e7e;
  --r: 'Space Grotesk', sans-serif;
  --f: 'Archivo', sans-serif;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
}

/* ── Browser surfaces ── */
::selection { background: var(--accent); color: var(--bg); }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}
/* Full-bleed cards and gallery thumbs: draw the ring inside so overflow:hidden
   parents and tight grids don't clip it. */
.film-card:focus-visible,
.proj:focus-visible,
.scene-tile:focus-visible,
.lb-thumb:focus-visible {
  outline-offset: -3px;
}

/* ── Touch targets (44px minimum) ── */
footer .f-nav a,
footer .f-email {
  display: inline-block;
  padding: .85rem 0;
  margin: -.85rem 0;
}
footer .f-soc { width: 44px; height: 44px; }
footer .f-soc svg { width: 16px; height: 16px; }
.nav-burger { min-width: 44px; min-height: 44px; }

/* ── Press feedback ──
   The independent `scale` property composes with the inline `transform`
   the magnetic-button effect sets, so both apply at once. */
.btn-p:active, .btn-s:active, .nav-btn:active { scale: .97; }

/* Error text and borders; ~7:1 on --bg-1. */
:root { --danger: #F08A8A; }