/* Class-based dark mode overrides — loaded outside Tailwind's pipeline */

html.dark {
  /* Deep neutral zinc — no purple tint */
  --color-bg: #131314;
  --color-bg-card: #1E1F20;
  --color-bg-surface: #28292A;
  --color-text-primary: #E3E3E3;
  --color-text-secondary: #9AA0A6;
  /* --color-ink stays dark in both themes so "inset editorial panel"
     surfaces (hero, Morning Brief, deck cover, dark pills) keep white
     text readable. Slightly lighter than --color-bg so the panel
     reads as elevated against the page. */
  --color-ink: #1E1F20;
  --color-border: #3C4043;
  --color-highlight: #28292A;

  /* Accent — Nectarine lifted to warm mango for dark-mode legibility.
     From kit colors_and_type.css:156 dark block. Keeps the single-accent
     editorial story coherent; no Google blue. */
  --color-accent: #F2994A;
  --color-accent-light: #3B2418;

  /* Signal warmth — the coral/peche/nectarine family, lifted for dark. */
  --color-coral: #F27A4E;
  --color-nectarine: #F09A8F;
  --color-amber: #F7C948;
  --color-peche: #F7C948;

  /* Menthe / Lagune lifted for dark. */
  --color-menthe: #B8DCC4;
  --color-lagune: #8AB6C3;

  /* Success / growth (legacy --color-green alias) — sage lifted. */
  --color-green: #81C995;
  --color-green-light: #1E3328;

  /* Category washes — warm zinc from kit colors_and_type.css:161–165. */
  --color-rose: #3D2028;
  --color-rose-strong: #4D2E38;
  --color-lemon: #3D3218;
  --color-lemon-strong: #4D4220;
  --color-mint: #3B2418;
  --color-mint-strong: #4D3422;
  --color-sky: #3D2A1A;
  --color-sky-strong: #4D3720;
  --color-lavender: #3D281A;
}

/* Category card gradients — warm zinc washes in dark */
html.dark .card-gradient-rose     { background: #3D2028; border-color: transparent; }
html.dark .card-gradient-lemon    { background: #3D3218; border-color: transparent; }
html.dark .card-gradient-mint     { background: #3B2418; border-color: transparent; }
html.dark .card-gradient-sky      { background: #3D2A1A; border-color: transparent; }
html.dark .card-gradient-lavender { background: #3D281A; border-color: transparent; }

/* Stat pills — all warm zinc, neutral keyed to mango accent (not blue) */
html.dark .stat-pill-growth  { background-color: #1E3328; color: #81C995; }
html.dark .stat-pill-best    { background-color: #3D3218; color: #F7C948; }
html.dark .stat-pill-neutral { background-color: #3B2418; color: #F2994A; }
html.dark .stat-pill-warning { background-color: #3D2028; color: #F27A4E; }

/* Category chip dark variants */
html.dark .cat-pitch   { background-color: #3D2028; color: #F09A8F; }
html.dark .cat-product { background-color: #3D3218; color: #F7C948; }
html.dark .cat-growth  { background-color: #1E3328; color: #B8DCC4; }
html.dark .cat-award   { background-color: #3D3218; color: #F7C948; }
html.dark .cat-partner { background-color: #3D2A1A; color: #8AB6C3; }
html.dark .cat-neutral { background-color: #28292A; color: #9AA0A6; }

/* Score badge dark variants */
html.dark .score-high { background-color: #1E3328; color: #B8DCC4; }
html.dark .score-mid  { background-color: #3D3218; color: #F7C948; }
html.dark .score-low  { background-color: #28292A; color: #9AA0A6; }

/* Legacy btn-mobile-primary — mango, not blue */
html.dark .btn-mobile-primary       { background-color: #F2994A; color: #131314; }
html.dark .btn-mobile-primary:hover { background-color: #F4A860; }

/* Pill tags — nectarine family, not blue */
html.dark .pill-tag          { border-color: #3C4043; color: #E3E3E3; }
html.dark .pill-tag-selected { background-color: #3B2418; border-color: #F2994A; color: #F2994A; }

/* ---------- ATMOSPHERE SURFACES — DARK MODE ----------
   In dark mode the warm gradients would read as blown-out against
   neutral zinc, so flatten non-ink variants to elevated card color.
   The `ink` variant keeps its dark radial — it was designed dark. */
html.dark .atmo-peach,
html.dark .atmo-pech,
html.dark .atmo-lavender,
html.dark .atmo-menthe,
html.dark .atmo-lagune {
  background-image: none;
  background-color: var(--color-bg-card);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.04);
}

/* Focus Mode is a page-level wrapper, not an .atmo-* utility, so it bypasses
   the neutraliser above. Drop its lavender gradient to the app canvas. */
html.dark .focus-mode {
  background: var(--color-bg);
}

/* ---------- LIQUID GLASS — DARK MODE ----------
   Generic liquid-glass surfaces (pre-kit). .lg-header is the opinionated
   Atmosphere-Kit header primitive; keep both. */

html.dark .liquid-glass {
  background: rgba(30, 31, 32, 0.7);
  background-blend-mode: luminosity;
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.08);
}

html.dark .liquid-glass::before {
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.12) 0%,
    rgba(255, 255, 255, 0.04) 20%,
    rgba(255, 255, 255, 0) 40%,
    rgba(255, 255, 255, 0) 60%,
    rgba(255, 255, 255, 0.04) 80%,
    rgba(255, 255, 255, 0.12) 100%
  );
}

html.dark .liquid-glass-subtle {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.08);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

html.dark .liquid-glass-elevated {
  background: rgba(30, 31, 32, 0.8);
  box-shadow:
    inset 0 1px 1px rgba(255, 255, 255, 0.1),
    0 4px 16px rgba(0, 0, 0, 0.3),
    0 1px 3px rgba(0, 0, 0, 0.2);
}

html.dark .liquid-glass-elevated::before {
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.15) 0%,
    rgba(255, 255, 255, 0.05) 20%,
    rgba(255, 255, 255, 0) 40%,
    rgba(255, 255, 255, 0) 60%,
    rgba(255, 255, 255, 0.05) 80%,
    rgba(255, 255, 255, 0.15) 100%
  );
}

html.dark .liquid-glass-interactive:hover {
  background: rgba(255, 255, 255, 0.07);
  box-shadow:
    inset 0 1px 1px rgba(255, 255, 255, 0.12),
    0 8px 24px rgba(0, 0, 0, 0.4);
}