/**
 * Dark Theme Colors
 *
 * Same brand as light: #00d9ff → `189 100% 50%`.
 *
 * Semantic pairs (do not split ad hoc in components):
 * - --primary / --primary-foreground — filled CTAs. On dark UI the brand #00d9ff is bright enough
 *   that **dark ink** (same as light :root --foreground) reads better than white (WCAG + legibility).
 * - --secondary / --secondary-foreground — neutral filled controls on dark chrome (elevated gray +
 *   light text), not a light-theme secondary pasted onto .dark.
 *
 * Tuning contrast: adjust HSL together; avoid setting text color per button in React — use tokens.
 */

.dark {
  /* Warm-gray surface ladder mapped from Claude's dark theme (hue ~48–60, a
   * faint warm tint instead of pure neutral). The VISIBLE page background is
   * Claude's bg-100 (~14.5%) — NOT near-black; card/popover lift above it so
   * panels and menus read as raised. muted recesses below the page.
   *   page ≈ bg-100   card ≈ bg-000(18.4%)   popover ≈ slightly above card */
  --background: hsl(60 2.7% 14.5%);
  --foreground: hsl(48 33% 97%);
  --card: hsl(60 2.1% 18.4%);
  --card-foreground: hsl(48 33% 97%);
  --popover: hsl(48 2.5% 21%);
  --popover-foreground: hsl(48 33% 97%);
  /* Exact brand: #00d9ff (same HSL as :root light primary) */
  --primary: hsl(189 100% 50%);
  /* Dark label on bright cyan — stronger contrast than white on #00d9ff */
  --primary-foreground: hsl(0 0% 9%);
  /* Secondary: elevated warm-gray control surface + light label */
  --secondary: hsl(60 2.1% 18.4%);
  --secondary-foreground: hsl(48 33% 97%);
  /* Recessed surface — below the page (Claude bg-200), for input rest / chips. */
  --muted: hsl(30 3.3% 11.8%);
  --muted-foreground: hsl(48 5% 59%);
  /* Hover/active surface (rails, menus, tabs) — a quiet warm lift above the page. */
  --accent: hsl(48 3% 24%);
  --accent-foreground: hsl(48 33% 97%);
  --destructive: hsl(0 67% 60%);
  --destructive-foreground: hsl(0 0% 98%);
  /* Soft warm border — Claude draws hairlines from a light border at low
   * contrast, so a mid warm-gray keeps lines visible but never harsh. */
  --border: hsl(48 3% 28%);
  /* Input surface — a notch above card so fields read as raised controls. */
  --input: hsl(48 2.5% 24%);
  /* Divider — hairline; slightly softer than --border so rows don't read as a
   * hard rule (Claude menus/rows). */
  --divider: hsl(48 3% 24%);
  /* Overlay — modal scrim / backdrop behind dialogs, drawers, sheets. Black in
   * both themes; slightly darker here so it still reads on the dark page. */
  --overlay: hsl(0 0% 0% / 0.7);
  /* Focus ring — blue (system-accent feel), independent of the cyan brand. */
  --ring: hsl(217 91% 60%);
  --shadow-card: none;

  /* Code surface — see light.css for the rationale. On dark we want
   * a panel slightly elevated from `--background` (4%) but below
   * `--popover` (12%); 9% sits in the sweet spot — visible block but
   * not a heavy "second card" feel. Inline code uses the same hue at
   * a touch lighter so chips read as recessed, not as buttons. */
  --code: hsl(0 0% 9%);
  --code-foreground: hsl(0 0% 92%);
  --code-border: hsl(0 0% 18%);
  --code-inline: hsl(0 0% 14%);
  --code-inline-foreground: hsl(0 0% 92%);
  /* Sidebar — same warm-gray family as the page (Claude has NO black sidebar
   * block; rail and page share one tone). A hair darker than --background for
   * subtle separation, not a hard black slab. */
  --sidebar-background: hsl(30 3% 11.8%);
  --sidebar-foreground: hsl(48 33% 97%);
  --sidebar-primary: hsl(189 100% 50%);
  --sidebar-primary-foreground: hsl(0 0% 9%);
  --sidebar-accent: hsl(48 3% 24%);
  --sidebar-accent-foreground: hsl(48 33% 97%);
  --sidebar-border: hsl(48 3% 28%);
  --sidebar-ring: hsl(217 91% 60%);
  /* ── Status surfaces (dark) ──────────────────────────────────────
   * Dark variants: dim backgrounds (~8-12% lightness) so banners
   * don't blow out against the near-black page. Foreground raised
   * to ~70-80% lightness for contrast. Borders kept muted.
   *
   * `--{status}-foreground` is the LIGHT status tint for text on the
   * `*-background` banner — NOT a contrast color for the solid `*` fill
   * (light-green-on-green is unreadable). For text/icons ON the solid
   * fill use `--on-{status}` below.
   * ─────────────────────────────────────────────────────────────── */

  /* Warning — amber */
  --warning: hsl(38 92% 50%);
  --warning-background: hsl(38 80% 10%);
  --warning-foreground: hsl(38 90% 75%);
  --warning-border: hsl(38 60% 30%);
  /* Success — green */
  --success: hsl(142 60% 45%);
  --success-background: hsl(142 60% 8%);
  --success-foreground: hsl(142 70% 70%);
  --success-border: hsl(142 50% 25%);
  /* Destructive surface */
  --destructive-background: hsl(0 80% 10%);
  --destructive-border: hsl(0 70% 30%);
  /* Info — blue-cyan */
  --info: hsl(200 80% 55%);
  --info-background: hsl(200 80% 8%);
  --info-foreground: hsl(200 80% 75%);
  --info-border: hsl(200 60% 25%);

  /* On-fill text/icon — readable color ON the solid `*` fill (badges,
   * unread pills, filled chips). The status fills here are bright/mid
   * (45-60% L) so near-black ink contrasts best (WhatsApp pattern).
   *   on-success  vs --success (142 60% 45%) → 6.9:1 (AA)
   *   on-warning  vs --warning (38 92% 50%)  → 8.4:1 (AA)
   *   on-info     vs --info    (200 80% 55%) → 6.9:1 (AA)
   *   on-destructive vs --destructive (0 67% 60%) → 4.7:1 (AA) */
  --on-success: hsl(0 0% 9%);
  --on-warning: hsl(0 0% 9%);
  --on-info: hsl(0 0% 9%);
  --on-destructive: hsl(0 0% 9%);
  /* Surface gradient dark */
  --surface-gradient: linear-gradient(to bottom, var(--background), color-mix(in oklab, var(--background) 80%, transparent));

  /* Chart colors — chart-1 aligned with brand.
   * Fully-wrapped hsl() like every other token (consume via `bg-chart-N` or
   * `var(--chart-N)`, never `hsl(var(--chart-N))`). */
  --chart-1: hsl(189 100% 50%);
  --chart-2: hsl(142 76% 36%);
  --chart-3: hsl(262 83% 58%);
  --chart-4: hsl(26 90% 57%);
  --chart-5: hsl(346 77% 50%);
}