/* ============================================
   DINA dark.css — loaded LAST
   Re-declares the token ladder upward (page → tint → raised deep)
   ============================================ */

html[data-dark],
html[data-edition="dark"] {
  --ink: #F5F7FA;
  --ink-55: rgba(255, 255, 255, 0.58);
  --ink-30: rgba(255, 255, 255, 0.30);
  --paper: #0C1116;
  --tint: #0F151B;
  --deep: #1A222C; /* RAISED */
  --line: rgba(255, 255, 255, 0.13);
  --line-soft: rgba(255, 255, 255, 0.07);

  --accent: #F97316;
  --accent-fill: #F97316;
  --accent-soft: rgba(249, 115, 22, 0.14);
  --accent-glow: rgba(249, 115, 22, 0.35);

  --free: #22c55e;
  --taken: #f87171;
  --unsure: #fbbf24;

  --bg: var(--paper);
  --bg-elevated: var(--tint);
  --bg-card: #12181f;
  --bg-deep: #080b0f;
  --text-primary: var(--ink);
  --text-secondary: var(--ink-55);
  --text-muted: rgba(255, 255, 255, 0.42);
  --border: var(--line);
  --border-subtle: var(--line-soft);
}

html[data-dark] .navbar,
html[data-edition="dark"] .navbar {
  background: color-mix(in srgb, var(--paper) 78%, transparent);
}

html[data-dark] .navbar.scrolled,
html[data-edition="dark"] .navbar.scrolled {
  background: color-mix(in srgb, var(--paper) 92%, transparent);
}

html[data-dark] .nav-cta,
html[data-edition="dark"] .nav-cta {
  background: var(--ink);
  color: var(--paper);
}

html[data-dark] .nav-cta:hover,
html[data-edition="dark"] .nav-cta:hover {
  background: var(--accent);
  color: #0C1116;
}

html[data-dark] .btn-primary,
html[data-edition="dark"] .btn-primary {
  background: var(--ink);
  color: var(--paper);
}

html[data-dark] .btn-primary:hover,
html[data-edition="dark"] .btn-primary:hover {
  background: var(--accent);
  color: #0C1116;
}

html[data-dark] .ed-pill__seg.is-on,
html[data-edition="dark"] .ed-pill__seg.is-on {
  background: var(--ink);
  color: var(--paper);
}

html[data-dark] .lab-canvas-stage,
html[data-edition="dark"] .lab-canvas-stage {
  background: #0a0e12;
}

html[data-dark] .chip.is-on,
html[data-edition="dark"] .chip.is-on {
  background: var(--ink);
  color: var(--paper);
}

html[data-dark] .btn-sm.primary,
html[data-edition="dark"] .btn-sm.primary {
  background: var(--ink);
  color: var(--paper);
}

html[data-dark] .btn-sm.primary:hover,
html[data-edition="dark"] .btn-sm.primary:hover {
  background: var(--accent);
  color: #0C1116;
}

/* Hover lifts on dark — never paint white slabs */
html[data-dark] .insight-card:hover,
html[data-edition="dark"] .insight-card:hover {
  background: var(--deep);
}

html[data-dark] .direction-item:hover,
html[data-edition="dark"] .direction-item:hover {
  background: var(--deep);
}

/* Logo insert + true-random remain coherent on dark */
html[data-dark] .logo-insert-card,
html[data-edition="dark"] .logo-insert-card {
  background: var(--tint);
  border-color: var(--line);
}
html[data-dark] .logo-ref-strip,
html[data-edition="dark"] .logo-ref-strip {
  background: var(--paper);
  border-color: var(--line);
}
html[data-dark] .btn-true-random,
html[data-edition="dark"] .btn-true-random {
  background: linear-gradient(135deg, #F97316 0%, #ea580c 100%) !important;
  color: #0C1116 !important;
  box-shadow: 0 2px 10px rgba(249, 115, 22, 0.32);
}

/* Contact form status — the paper error red goes muddy on a dark ground */
html[data-dark] .form-status.is-error,
html[data-edition="dark"] .form-status.is-error {
  color: #f87171;
}