/* Follow the White Rabbit — the Matrix cinematic skin (ADR 0050).

   OPT-IN + FULLY SCOPED. Linked only by the design site; every rule
   sits under [data-theme^="white-rabbit-"], so it is inert for every
   other theme and every consumer that doesn't link it. The 18-token
   palette lives in themes.css; this file is the motif kit — display
   @font-face, terminal ornament, phosphor glow, and a static CRT
   backdrop. The animated code-rain is the separate white-rabbit.js
   (ADR 0050 motion axis). */

@font-face {
  font-family: "Share Tech Mono";
  src: url("/static/design/fonts/ShareTechMono-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* ============================================================
   Shared across both modes
   ============================================================ */

/* Terminal-ise the chrome: uppercase, tracked-out buttons with a
   shell prompt on the primary action. */
:root[data-theme^="white-rabbit-"] .button {
  text-transform: uppercase;
  letter-spacing: 0.09em;
  font-weight: 400;
}
:root[data-theme^="white-rabbit-"] .button--primary::before {
  content: "> ";
  opacity: 0.85;
}

/* Chips read as terminal tokens: [ value ]. */
:root[data-theme^="white-rabbit-"] .chip::before {
  content: "[";
  opacity: 0.55;
  margin-right: 0.15em;
}
:root[data-theme^="white-rabbit-"] .chip::after {
  content: "]";
  opacity: 0.55;
  margin-left: 0.15em;
}

/* Cards get a hard 1px terminal frame. */
:root[data-theme^="white-rabbit-"] .card {
  border: 1px solid var(--border-subtle);
  background: var(--bg-elevated);
}

/* Section headings get a leading comment prompt. */
:root[data-theme^="white-rabbit-"] .section-heading::before {
  content: "// ";
  color: var(--accent);
  opacity: 0.7;
}

/* Links: accent, like terminal hyperlinks. */
:root[data-theme^="white-rabbit-"] a {
  color: var(--accent);
}

/* ============================================================
   Dark mode — the canonical Matrix: phosphor glow + CRT backdrop
   ============================================================ */

:root[data-theme="white-rabbit-dark"] h1,
:root[data-theme="white-rabbit-dark"] h2,
:root[data-theme="white-rabbit-dark"] h3,
:root[data-theme="white-rabbit-dark"] .card-title,
:root[data-theme="white-rabbit-dark"] .marketing-nav-brand {
  text-shadow: 0 0 8px rgba(57, 255, 20, 0.35);
}
:root[data-theme="white-rabbit-dark"] .button--primary {
  box-shadow: 0 0 14px -2px rgba(57, 255, 20, 0.55);
}
:root[data-theme="white-rabbit-dark"] .card {
  box-shadow: inset 0 0 0 1px rgba(57, 255, 20, 0.04),
    0 0 22px -14px rgba(57, 255, 20, 0.5);
}

/* CRT backdrop: green vignette + scanlines behind all content.
   base.css paints html+body with --bg-primary; we drop body's
   background so this fixed ::before (z-index -1) shows above the html
   canvas but behind content. Static — the animated rain is
   white-rabbit.js. */
:root[data-theme="white-rabbit-dark"] body {
  background: transparent;
}
:root[data-theme="white-rabbit-dark"] body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(57, 255, 20, 0.06), rgba(5, 8, 10, 0) 60%),
    repeating-linear-gradient(
      0deg,
      rgba(57, 255, 20, 0.035) 0,
      rgba(57, 255, 20, 0.035) 1px,
      rgba(5, 8, 10, 0) 1px,
      rgba(5, 8, 10, 0) 3px
    );
}

:root[data-theme="white-rabbit-dark"] ::selection {
  background: rgba(57, 255, 20, 0.30);
  color: #eafff0;
}

/* ============================================================
   Light mode — a daylight console: dark-green ink on phosphor paper.
   Crisp and legible; no glow, no scanlines.
   ============================================================ */

:root[data-theme="white-rabbit-light"] ::selection {
  background: rgba(10, 122, 58, 0.22);
  color: #06231a;
}