/* ─────────────────────────────────────────────────────────────────────────────
   Dark appearance — follows the visitor's system setting.

   Every page keeps its own light tokens inline and links this file after them,
   so the same names resolve to the dark values below. Nothing here adds a hue:
   the ground, surface, ink and line values are the brand's dark band, lifted a
   step so a surface can sit visibly above the ground.

   Dark must never read flat. A surface is lighter than the ground it sits on,
   carries a one-pixel light edge along its top, and casts a soft shadow below —
   the same elevation a lit object has, which is what gives the page depth.
   /lab/ is always dark and does not link this file.
   ───────────────────────────────────────────────────────────────────────────── */

@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --bg:         #0b0c0e;
    --bg-sunk:    #111316;
    --surface:    #15171a;
    --ink:        #f7f7f5;
    --ink-2:      #b3b0a9;
    --ink-3:      #8b8880;
    --line:       #23252a;
    --line-2:     #33363d;
    --accent:     #5f8f7d;

    /* The AI band becomes a raised plane rather than a second black. */
    --dark:       #111316;
    --dark-2:     #181a1e;
    --dark-ink:   #f7f7f5;
    --dark-ink-2: #a3a09a;
    --dark-line:  #2a2d33;

    --lift:    inset 0 1px 0 rgb(255 255 255 / 0.05),
               0 1px 2px rgb(0 0 0 / 0.45),
               0 20px 44px -26px rgb(0 0 0 / 0.85);
    --lift-hi: inset 0 1px 0 rgb(255 255 255 / 0.08),
               0 1px 2px rgb(0 0 0 / 0.5),
               0 28px 64px -30px rgb(0 0 0 / 0.95),
               0 0 48px -20px rgb(255 255 255 / 0.06);
  }

  .card, .price, .assess, form, .cta-band, .contact-card, .reach {
    box-shadow: var(--lift);
  }
  .price[data-featured] { border-color: #4a4d55; box-shadow: var(--lift-hi); }
  @media (hover: hover) and (pointer: fine) {
    .card:hover { border-color: #3d4047; box-shadow: var(--lift-hi); }
  }

  .band { border-block: 1px solid var(--dark-line); }
  .proof div { background: var(--bg); }
  .quote-tag, .tag { background: var(--bg-sunk); }

  .btn-primary:hover { background: #ffffff; }
  .btn-ghost:hover { border-color: #4a4d55; }
  .btn-invert-ghost:hover { border-color: #4a4d55; }

  .field :is(input, select, textarea) { background: var(--bg); }
  .field :is(input, select, textarea)::placeholder { color: #6d6a66; }
}