/* ============================================================================
   PR&R × Trybe — DARK LAYER
   ---------------------------------------------------------------------------
   Load AFTER prr-trybe-kit.css. Add `.tk-dark` to any wrapper (or <body>) and
   every .tk-* component inside it flips. No component knows which mode it is
   in — this file is a token swap, not a parallel stylesheet.

   THE TWO DECISIONS THAT MAKE IT WORK
   ---------------------------------------------------------------------------
   1 · ELEVATION IS LIGHT, NOT SHADOW.
       Trybe's whole elevation system is a coloured shadow: a contact shadow
       plus a big negative-spread ambient. On a #050D1E ground a shadow is
       invisible — you cannot cast darkness onto near-black. So on dark the
       shadow inverts into a LIT TOP EDGE: `inset 0 1px 0 rgba(255,255,255,α)`
       carries the elevation, the ring carries the boundary, and the ambient
       shadow survives only to separate an object from the page behind it.

   2 · THE SIX WELLS BECOME ONE MATERIAL LIT SIX WAYS.
       On light, the wells are six pastel FILLS. Six dark fills would either
       be indistinguishable from each other or look like a slot machine. So on
       dark there is a single navy base — the PR&R blue/dark-blue gradient —
       with a coloured light thrown across the top of it. Same material, six
       lamps. The brand stays navy; the hue only says which card you are on.

       The alphas are HUE-COMPENSATED, not equal. Amber at .55 would scream;
       blue at .28 would vanish into the navy it sits on. Perceived lightness
       against #0E2350 sets each one:

         blue   .55   ·  indigo .48  ·  sky   .42
         mint   .34   ·  slate  .26  ·  amber .26

   Radius follows the --tk-r and --tk-rc scales like everything else, so this file inherits
   the squared corners without mentioning them once.
   ========================================================================= */

.tk-dark {
  /* ── Ground + surfaces: the PR&R navy ramp ───────────────────────── */
  --tk-bg:        #050D1E;
  --tk-surface-1: #081833;
  --tk-surface-2: #0E2350;
  --tk-surface-3: #12305F;

  /* ── Hairlines become light at low alpha, never a darker grey ────── */
  --tk-line:        rgba(148, 183, 255, .14);
  --tk-line-soft:   rgba(148, 183, 255, .08);
  --tk-line-strong: rgba(148, 183, 255, .22);
  --tk-line-grid:   rgba(148, 183, 255, .06);
  --tk-border:      rgba(148, 183, 255, .14);

  /* ── Ink inverts and de-saturates toward blue, never toward grey ─── */
  --tk-ink-1: #eaf1ff;
  --tk-ink-2: #cfdcf5;
  --tk-ink-3: #9fb4d8;
  --tk-ink-4: #7f95bd;
  --tk-ink-5: #61779f;

  /* ── Brand blue brightens: #2563eb is unreadable as text on navy ─── */
  --tk-blue:        #60a5fa;
  --tk-blue-500:    #3b82f6;
  --tk-blue-600:    #60a5fa;
  --tk-blue-700:    #93c5fd;
  --tk-blue-soft:   rgba(96, 165, 250, .14);
  --tk-blue-soft-2: rgba(96, 165, 250, .24);

  --tk-success: #4ade80;
  --tk-warn:    #fbbf24;

  /* ── Rings: the boundary, now carrying most of the separation ───── */
  --tk-ring:      0 0 0 1px rgba(148, 183, 255, .13);
  --tk-ring-soft: 0 0 0 1px rgba(148, 183, 255, .07);
  --tk-ring-blue: 0 0 0 1px rgba(96, 165, 250, .45);

  /* ── Elevation: a lit top edge + an ambient that only separates ──── */
  --tk-e1: inset 0 1px 0 rgba(255, 255, 255, .05);
  --tk-e2: inset 0 1px 0 rgba(255, 255, 255, .06),
           0 18px 40px -26px rgba(0, 0, 0, .85);
  --tk-e3: inset 0 1px 0 rgba(255, 255, 255, .08),
           0 30px 64px -30px rgba(0, 0, 0, .92);
  --tk-e-inner: inset 0 1px 0 rgba(255, 255, 255, .06),
                0 12px 28px -16px rgba(0, 0, 0, .9);
  --tk-e-glass: 0 34px 84px -32px rgba(0, 0, 0, .92),
                inset 0 1px 0 rgba(255, 255, 255, .13);
  --tk-e-chip:  inset 0 1px 0 rgba(255, 255, 255, .16);

  /* ── Faces ───────────────────────────────────────────────────────── */
  --tk-face:            #0B1E42;
  --tk-face-2:          rgba(148, 183, 255, .07);
  --tk-face-glass:      rgba(148, 183, 255, .06);
  --tk-face-glass-edge: rgba(148, 183, 255, .17);
  --tk-face-rim:        rgba(11, 30, 66, .94);
  --tk-face-seg:        rgba(148, 183, 255, .08);
  --tk-face-acc:        rgba(148, 183, 255, .06);
  --tk-track:           rgba(148, 183, 255, .16);
  --tk-glyph-bg:        rgba(96, 165, 250, .16);
  --tk-glyph-ring:      rgba(96, 165, 250, .34);
  --tk-fade:            #050D1E;

  /* ── THE WELLS — one navy base, six hue-compensated top-lights ───── */
  --tk-well-base: linear-gradient(180deg, #0E2350 0%, #081733 100%);
  --tk-well-blue:
    radial-gradient(125% 88% at 50% -12%, rgba(37, 99, 235, .55) 0%, transparent 62%),
    var(--tk-well-base);
  --tk-well-indigo:
    radial-gradient(125% 88% at 50% -12%, rgba(99, 102, 241, .48) 0%, transparent 62%),
    var(--tk-well-base);
  --tk-well-sky:
    radial-gradient(125% 88% at 50% -12%, rgba(56, 189, 248, .42) 0%, transparent 62%),
    var(--tk-well-base);
  --tk-well-mint:
    radial-gradient(125% 88% at 50% -12%, rgba(34, 197, 94, .34) 0%, transparent 62%),
    var(--tk-well-base);
  --tk-well-slate:
    radial-gradient(125% 88% at 50% -12%, rgba(148, 163, 184, .26) 0%, transparent 62%),
    var(--tk-well-base);
  --tk-well-amber:
    radial-gradient(125% 88% at 50% -12%, rgba(251, 191, 36, .26) 0%, transparent 62%),
    var(--tk-well-base);

  /* ── Gradients ───────────────────────────────────────────────────── */
  --tk-grad-cta: linear-gradient(180deg, #3b82f6 0%, #1d4ed8 100%);
  /* The footer ramp flips direction with the mode. On light the visible strip
     had to be the DEEP end; on a near-black page it has to be the BRIGHT end
     or the footer disappears into the ground. Same geometry, opposite ramp. */
  --tk-grad-footer: linear-gradient(180deg, #050D1E 0%, #0A1D42 55%, #163B7A 100%);
  --tk-grad-deep:   linear-gradient(180deg, #050D1E 0%, #0A1733 42%, #123A86 100%);
  --tk-grad-glow:   radial-gradient(circle,
                      rgba(37, 99, 235, .42) 0%,
                      rgba(56, 189, 248, .16) 45%,
                      transparent 72%);

  /* ── Nav pill, re-lit ─────────────────────────────────────────────
     The light pill fakes machined acrylic with six white insets. On dark
     that reads as fog, so it collapses to ONE bright top edge plus a soft
     interior bloom — the same illusion, lit from a single source. */
  --tk-nav-face: linear-gradient(175deg,
                   rgba(148, 183, 255, .22) 0%,
                   #14336A 20%,
                   #0D2350 58%,
                   #081833 100%);
  --tk-nav-shadow:
    0 12px 36px -8px rgba(0, 0, 0, .6),
    0 20px 90px 20px rgba(0, 0, 0, .35),
    inset 0 1px 0 rgba(255, 255, 255, .22),
    inset -34px 14px 90px -30px rgba(120, 170, 255, .28),
    inset 0 -28px 60px -22px rgba(3, 10, 25, .55),
    inset 0 0 0 1px rgba(148, 183, 255, .12);

  --tk-panel-face:
    radial-gradient(120% 90% at 50% 0%, rgba(37, 99, 235, .30) 0%, transparent 62%),
    linear-gradient(180deg, #0B1E42 0%, #081833 55%, #050D1E 100%);

  background: var(--tk-bg);
  color: var(--tk-ink-2);
}

/* ============================================================================
   The short list of things a token swap genuinely cannot reach
   ========================================================================= */

/* Nav links are ink-1 by name but were authored against a white pill. */
.tk-dark .tk-nav-link,
.tk-dark .tk-nav-mark { color: var(--tk-ink-1); }

/* .tk-media is already near-black. On a near-black page it needs a boundary
   it did not need on white, or the card edge simply is not there. */
.tk-dark .tk-media { box-shadow: var(--tk-ring), var(--tk-e3); }

/* The pill tones were literal light-mode text colours. */
.tk-dark .tk-pill--live { background: rgba(74, 222, 128, .15);  color: #6ee7a0; }
.tk-dark .tk-pill--blue { background: rgba(96, 165, 250, .16);  color: #93c5fd; }
.tk-dark .tk-pill--warn { background: rgba(251, 191, 36, .15);  color: #fcd34d; }
.tk-dark .tk-pill--pending,
.tk-dark .tk-pill         { background: var(--tk-face-2); color: var(--tk-ink-3); }
.tk-dark .tk-pill--pending{ color: var(--tk-ink-4); }

/* The mini-app progress fill is a light-mode blue ramp. */
.tk-dark .tk-mini-bar > i { background: linear-gradient(90deg, #3b82f6, #93c5fd); }

/* Ghost button: on dark a white face would out-shout the primary. */
.tk-dark .tk-btn--ghost { background: var(--tk-face-2); color: var(--tk-ink-1); }
.tk-dark .tk-btn--ghost:hover { color: var(--tk-blue-700); background: var(--tk-blue-soft); }

/* The conic rim reads hotter on dark, so it can afford to be dimmer. */
.tk-dark .tk-rim-orbit > span > i { opacity: .85; }

/* Footer links were authored white-on-navy and already work; only the
   hairline above them needs to exist on a ground this dark. */
.tk-dark .tk-deep-footer { border-top: 1px solid rgba(148, 183, 255, .08); }