/**
 * Light Theme Colors
 *
 * Marketing / dark UI can use bright cyan `#00d9ff`. On **white** backgrounds, that neon with white
 * label fails contrast and looks harsh—so `:root` `--primary` is a **deeper blue-cyan** (same family,
 * lower L + slightly bluer hue) for buttons, links, and `text-primary`. Dark theme keeps the bright
 * swatch via `.dark`.
 *
 * Pairs `--primary` / `--primary-foreground` are tuned together. Prefer editing tokens over ad hoc classes.
 */

:root {
  /* Base colors - Clean white with neutral grays */
  --background: hsl(0 0% 94%);
  --foreground: hsl(0 0% 9%);
  --card: hsl(0 0% 100%);
  --card-foreground: hsl(0 0% 9%);
  --popover: hsl(0 0% 100%);
  --popover-foreground: hsl(0 0% 9%);
  /* Interactive primary on white (~#0989aa): readable white-on-fill + calmer than neon */
  --primary: hsl(192 90% 35%);
  --primary-foreground: hsl(0 0% 100%);
  --secondary: hsl(0 0% 9%);
  --secondary-foreground: hsl(0 0% 98%);
  --muted: hsl(0 0% 96%);
  --muted-foreground: hsl(0 0% 45%);
  /* Neutral hover/active surface — quiet gray lift, no hue tint
   * (Claude/macOS settings convention). */
  --accent: hsl(0 0% 94%);
  --accent-foreground: hsl(0 0% 9%);
  --destructive: hsl(0 84% 60%);
  --destructive-foreground: hsl(0 0% 98%);
  --border: hsl(0 0% 87%);
  /* Input surface — faint gray fill so fields are visible on white cards. */
  --input: hsl(0 0% 97%);
  /* Divider — hairline between rows; slightly darker than --border so it reads
   * on white cards. */
  --divider: hsl(0 0% 88%);
  /* Overlay — modal scrim / backdrop behind dialogs, drawers, sheets. A scrim
   * is black in both themes; the token owns the opacity. */
  --overlay: hsl(0 0% 0% / 0.6);
  /* Focus ring — blue (system-accent feel), independent of the cyan brand. */
  --ring: hsl(217 91% 55%);
  --shadow-card: 0 1px 3px 0 rgb(0 0 0 / 0.06), 0 1px 2px -1px rgb(0 0 0 / 0.04);

  /* Code surface — used by markdown code fences, terminal blocks,
   * any "this is code, not prose" panel. Single source of truth so
   * the colour is consistent across MarkdownMessage / PrettyCode /
   * embedded log views and doesn't drift per-component.
   *
   * Light: a soft warm-gray (~#f3f3f3) that sits visibly inside a
   * white card without heavy contrast. Foreground stays near-black
   * for body legibility. Border keeps the panel anchored.
   * Inline code shares the same surface for chip-on-chip cohesion.
   */
  --code: hsl(0 0% 96%);
  --code-foreground: hsl(0 0% 12%);
  --code-border: hsl(0 0% 88%);
  --code-inline: hsl(0 0% 93%);
  --code-inline-foreground: hsl(0 0% 14%);
  /* Sidebar Light Theme - Subtle gray background */
  --sidebar-background: hsl(0 0% 97%);
  --sidebar-foreground: hsl(0 0% 9%);
  --sidebar-primary: hsl(192 90% 35%);
  --sidebar-primary-foreground: hsl(0 0% 100%);
  --sidebar-accent: hsl(0 0% 95%);
  --sidebar-accent-foreground: hsl(0 0% 9%);
  --sidebar-border: hsl(0 0% 90%);
  --sidebar-ring: hsl(217 91% 55%);
  /* ── Status surfaces ─────────────────────────────────────────────
   * Each status has 4 tokens: icon/accent color, page background,
   * readable foreground text, and border ring.
   * Use bg-warning-background / text-warning-foreground / border-warning-border
   * in components — never raw amber-* or green-* classes.
   *
   * `--{status}-foreground` is status TEXT on the tinted `*-background`
   * (banners) — it is a colored tint, NOT a contrast color for the solid
   * `*` fill. For text/icons sitting ON the solid fill (badges, pills,
   * filled chips) use the `--on-{status}` tokens below instead.
   * ─────────────────────────────────────────────────────────────── */

  /* Warning — amber */
  --warning: hsl(38 92% 50%);
  --warning-background: hsl(48 100% 96%);
  --warning-foreground: hsl(26 90% 25%);
  --warning-border: hsl(38 70% 65%);
  /* Success — green */
  --success: hsl(142 71% 45%);
  --success-background: hsl(138 76% 97%);
  --success-foreground: hsl(140 60% 20%);
  --success-border: hsl(142 60% 65%);
  /* Destructive surface (separate from the filled button token) */
  --destructive-background: hsl(0 100% 97%);
  --destructive-border: hsl(0 84% 70%);
  /* Info — blue-cyan (brand-adjacent) */
  --info: hsl(200 90% 40%);
  --info-background: hsl(200 100% 97%);
  --info-foreground: hsl(200 80% 20%);
  --info-border: hsl(200 80% 65%);

  /* On-fill text/icon — readable color sitting ON the solid `*` fill
   * (badges, unread pills, filled chips), distinct from the `*-foreground`
   * banner tints above. The mid-lightness green/amber/blue/red fills all
   * take a near-black ink (WhatsApp/Telegram pattern) for the best contrast.
   *   on-success  vs --success (142 71% 45%) → 7.8:1 (AA)
   *   on-warning  vs --warning (38 92% 50%)  → 8.4:1 (AA)
   *   on-info     vs --info    (200 90% 40%) → 4.4:1 (AA-large / borderline AA)
   *   on-destructive vs --destructive (0 84% 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 */
  --surface-gradient: linear-gradient(to bottom, var(--background), color-mix(in oklab, var(--background) 80%, transparent));

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