/* ═══════════════════════════════════════════════════════════════════════
   THE SCREENING ROOM: lyfework.io's look, lifted from go.lyfework.io/scale
   (Ryan, 2026-10-30: "I want the design to actually have the update... just build it all").
   One file, linked last on every page that carries <html data-theme="dark">. It flips the
   page's own tokens to the room's, puts the room light behind everything, turns every lit
   card to its dark face and recolours the shared furniture (nav, footer, modal, buttons,
   fields). Pages keep their layouts and their own copy. A page's family stylesheet
   (blog.css, pillar.css, legal.css) carries its own dark section for the colours it
   hard-codes; this file carries what every page shares.
   Reference: scale/index.html (the room, the stage, the swash) and design-dna
   references/lit-cards.md (the dark recipe).
═══════════════════════════════════════════════════════════════════════ */

/* 1  tokens: the funnel's room, a step deeper than the kit's dark theme, with brighter grays so
      every line reads (muted 9.8:1, dim 6.4:1 on the ground). :root[data-theme] outranks any
      page's inline :root{} block, whatever order the sheets load in. */
:root[data-theme="dark"] {
  --bg: #000000;
  --surface: #101115;
  --panel: rgba(255, 255, 255, 0.028); /* a raised band lets the room through */
  --elev-1: #15161b;
  --elev-2: #1c1d23;
  --elev-3: #22232a;
  --border: rgba(255, 255, 255, 0.1);
  --border-strong: rgba(255, 255, 255, 0.18);
  --border-subtle: rgba(255, 255, 255, 0.06);
  --text: #ffffff;
  --text-muted: #b3b7c4;
  --text-dim: #8c91a1;
  --text-faint: rgba(255, 255, 255, 0.42);
  --lava-ink: #ff7a45; /* on black the readable Lava is the bright one (7.3:1) */
  --lava-ink-h: #ff9466;
  --accent-ink: #ffffff;
  --accent-soft: rgba(255, 84, 24, 0.14);
  --mark-word: #ffffff;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.5);
  --shadow-md: 0 10px 30px rgba(0, 0, 0, 0.5);
  --shadow-lg: 0 24px 60px rgba(0, 0, 0, 0.7);
  --glint-rgb: 255, 112, 52;
  --accent-rgb: 255, 84, 24;
}

/* 2  the ground and the room light: black behind everything, and two low pools of light fixed
      behind the whole page, warm Lava low left and cool steel high right, with a faint wash
      through the middle, so the black has depth as you scroll. The body goes transparent so the
      light shows through it. */
html[data-theme="dark"] {
  background: var(--bg);
  color-scheme: dark;
}
html[data-theme="dark"] body {
  background: transparent;
  color: var(--text);
}
html[data-theme="dark"] body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(ellipse 80% 62% at 0% 100%, rgba(255, 84, 24, 0.2), rgba(255, 84, 24, 0.08) 42%, rgba(255, 84, 24, 0) 76%),
    radial-gradient(ellipse 70% 58% at 100% 0%, rgba(110, 130, 190, 0.17), rgba(110, 130, 190, 0.06) 42%, rgba(110, 130, 190, 0) 76%),
    radial-gradient(ellipse 90% 70% at 50% 50%, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0) 70%);
}
html[data-theme="dark"] ::selection {
  background: var(--lava);
  color: #fff;
}

/* 3  lit cards, the dark face: a light edge bright top left, the Lava glint bottom right, a lifted
      face, a deep shadow, the low Lava light pooling under the card, and the dark glisten. Every
      name the site uses for the house card. */
[data-theme="dark"] .lit,
[data-theme="dark"] .lit-dk,
[data-theme="dark"] .lyf-card,
[data-theme="dark"] .lyf-card-static,
[data-theme="dark"] .lit-tint {
  color: var(--text);
  background:
    linear-gradient(172deg, #1c1d23, #111216 48%, #0c0d10) padding-box,
    linear-gradient(145deg, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0.12) 22%, rgba(255, 255, 255, 0.05) 56%, rgba(var(--glint-rgb), 0.6)) border-box #0c0d10;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    inset 1px 0 0 rgba(255, 255, 255, 0.04),
    0 26px 54px -20px rgba(0, 0, 0, 0.95),
    0 12px 44px -22px rgba(var(--accent-rgb), 0.3);
}
[data-theme="dark"] .lit::after,
[data-theme="dark"] .lit-dk::after,
[data-theme="dark"] .lyf-card::after,
[data-theme="dark"] .lyf-card-static::after,
[data-theme="dark"] .lit-tint::after {
  background-image: linear-gradient(110deg, rgba(255, 255, 255, 0) 32%, rgba(255, 255, 255, 0.13) 45%, rgba(255, 255, 255, 0.04) 52%, rgba(255, 255, 255, 0) 60%);
}
/* inner surfaces on a lit card stay crisp instead of fading into the face */
[data-theme="dark"] .lit .tile,
[data-theme="dark"] .lyf-card .tile {
  background: var(--elev-1);
  border-color: rgba(255, 255, 255, 0.1);
}

/* 4  buttons: the Lava ask stays; the black secondary turns white so it still reads as a button */
[data-theme="dark"] .btn-dark,
[data-theme="dark"] .legal-btn-dark,
[data-theme="dark"] .lyf-btn-dark,
[data-theme="dark"] .btn-ink {
  background: #ffffff;
  color: #0a0a0a;
  border-color: #ffffff;
  box-shadow: inset 0 1px 0 #fff;
}
[data-theme="dark"] .btn-dark:hover,
[data-theme="dark"] .legal-btn-dark:hover,
[data-theme="dark"] .lyf-btn-dark:hover,
[data-theme="dark"] .btn-ink:hover {
  background: #e9eaef;
  color: #0a0a0a;
}
[data-theme="dark"] .lyf-btn-ghost {
  color: var(--text);
  border-color: var(--border-strong);
  background: transparent;
}

/* 5  fields: dark faces with a readable hairline, white type */
[data-theme="dark"] :where(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="submit"]):not([type="button"]), textarea, select) {
  background: var(--elev-1);
  color: var(--text);
  border-color: var(--border-strong);
}
[data-theme="dark"] :where(input, textarea)::placeholder {
  color: var(--text-dim);
}

/* 6  the footer and the cookie preferences modal, shared furniture from lyf-site.js: the footer lets
      the room through under a hairline like the funnel's; the modal is a dark lit card */
[data-theme="dark"] .lyf-footer {
  background: transparent;
  border-top-color: var(--border);
}
[data-theme="dark"] .lyf-modal {
  color: var(--text);
  background:
    linear-gradient(172deg, #1c1d23, #111216 48%, #0c0d10) padding-box,
    linear-gradient(145deg, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0.12) 22%, rgba(255, 255, 255, 0.05) 56%, rgba(var(--glint-rgb), 0.6)) border-box #0c0d10;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    inset 1px 0 0 rgba(255, 255, 255, 0.04),
    0 30px 80px -24px rgba(0, 0, 0, 0.9),
    0 12px 44px -22px rgba(var(--accent-rgb), 0.3);
}
[data-theme="dark"] .lyf-modal::after {
  background-image: linear-gradient(110deg, rgba(255, 255, 255, 0) 32%, rgba(255, 255, 255, 0.13) 45%, rgba(255, 255, 255, 0.04) 52%, rgba(255, 255, 255, 0) 60%);
}
[data-theme="dark"] .lyf-modal .mh,
[data-theme="dark"] .lyf-modal .mf,
[data-theme="dark"] .lyf-cat {
  border-color: rgba(255, 255, 255, 0.1);
}
[data-theme="dark"] .lyf-modal .mh p,
[data-theme="dark"] .lyf-cat p {
  color: var(--text-muted);
}
[data-theme="dark"] .lyf-modal .mh p a {
  color: var(--lava-ink);
}
[data-theme="dark"] .lyf-sw .tk {
  background: #3a3d48;
}
[data-theme="dark"] .lyf-scrim {
  background: rgba(0, 0, 0, 0.72);
}

/* 7  the stage: the funnel's hero floor for any page that asks for it. A white dot grid fading out
      from the centre and one pool of house light from above. Put <div class="room-stage"></div>
      first inside a hero that has position:relative and isolation:isolate. */
[data-theme="dark"] .room-stage {
  position: absolute;
  inset: -96px 0 0;
  z-index: -1;
  pointer-events: none;
  overflow: hidden;
}
[data-theme="dark"] .room-stage::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Ccircle cx='1' cy='1' r='1' fill='%23ffffff' fill-opacity='.1'/%3E%3C/svg%3E");
  background-size: 24px 24px;
  background-position: center top;
  -webkit-mask-image: radial-gradient(ellipse 72% 58% at 50% 34%, #000 25%, transparent 78%);
  mask-image: radial-gradient(ellipse 72% 58% at 50% 34%, #000 25%, transparent 78%);
}
[data-theme="dark"] .room-stage::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 0;
  width: min(1500px, 160vw);
  height: min(1100px, 150vw);
  transform: translateX(-50%);
  background: radial-gradient(ellipse 50% 50% at 50% 30%, rgba(255, 255, 255, 0.075), rgba(255, 255, 255, 0) 70%);
}

/* 8  the swash: the funnel's hand-drawn Lava line under a key phrase, drawn in after the headline
      lands. Markup: <span class="mark">Phrase<svg class="swash" viewBox="0 0 400 30"
      preserveAspectRatio="none" aria-hidden="true"><path d="M6 20 C 90 8, 250 26, 394 12"/>
      <path d="M22 25 C 120 15, 260 30, 380 19"/></svg></span>, the paths with pathLength="1". */
[data-theme="dark"] .mark {
  position: relative;
  display: inline-block;
  white-space: nowrap;
}
[data-theme="dark"] .mark .swash {
  position: absolute;
  left: -3%;
  width: 106%;
  bottom: -0.3em;
  height: 0.34em;
  overflow: visible;
  color: var(--lava);
  pointer-events: none;
}
[data-theme="dark"] .swash path {
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
}
[data-theme="dark"] .swash path + path {
  opacity: 0.7;
}
.js-anim[data-theme="dark"] .swash path {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  transition: stroke-dashoffset 0.9s cubic-bezier(0.65, 0, 0.35, 1) 0.8s;
}
.js-anim[data-theme="dark"] .swash path + path {
  transition-delay: 1.15s;
}
.js-anim.go[data-theme="dark"] .swash path,
.js-anim[data-theme="dark"] .swash.on path {
  stroke-dashoffset: 0;
}
@media (prefers-reduced-motion: reduce) {
  [data-theme="dark"] .swash path {
    transition: none;
    stroke-dashoffset: 0;
  }
}

/* 9  the lockup: pages paint the nav wordmark ink with an inline custom property; in the room it is white everywhere */
[data-theme="dark"] .lockup {
  --mark-word: #ffffff !important;
  --lk-word: #ffffff !important;
}

/* 11 the footer's service-area separators: decorative dots, lifted so they read in the room */
[data-theme="dark"] .lyf-footer .acities .sep {
  color: rgba(255, 255, 255, 0.32);
}

/* 12 a long ask never leaves one word on its own line */
[data-theme="dark"] .btn.btn-lg,
[data-theme="dark"] .ty-btn-primary,
[data-theme="dark"] .btn-outline {
  text-wrap: balance;
}