/* ============================================================================
   theme-buddy.css — Buddy (V9) palette. Fills the token contract for two themes:
   bright (default) and dusk. Hex lives here (and tokens.css) only — never in the
   component stylesheets. Scoped to [data-design="buddy"]; [data-theme] nests in.
   ============================================================================ */

[data-design="buddy"],
[data-design="buddy"][data-theme="bright"] {
  /* surfaces */
  --bg: #f4f1fb;
  --canvas: #ffffff;
  --surface: #faf9fe;
  --dot: #d8d2ee; /* dot-grid pattern */

  /* ink (WCAG AA: ink-soft/ink-dim verified ≥4.5:1 on white & soft surfaces) */
  --ink: #1b1530;
  --ink-soft: #615d72;
  --ink-dim: #6f6a80;
  --line: #1b1530;

  /* brand */
  --indigo: #5b3df5;
  --indigo-600: #4b2fd6;
  --indigo-soft: #eae5fe;
  --grape: #8b5cf6;

  /* tiles */
  --teal: #0ea5a5;
  --teal-soft: #d5f1f1;
  --amber: #f59e0b;
  --amber-soft: #fef0d6;
  --sky: #2160c8;
  --sky-soft: #dceafe;
  --lime: #65a30d;
  --lime-soft: #e7f3cf;
  --pink: #ec4899;
  --pink-soft: #fce7f3;

  /* semantic (state) — AA-compliant: white-on-accent AND accent-text-on-white ≥4.5:1 */
  --ok: #0c7a4f;
  --ok-soft: #d6f2e5;
  --warn: #946100;
  --warn-soft: #fcedd0;
  --danger: #c4283f;
  --danger-soft: #fbe0e5;
  --info: #2160c8;
  --info-soft: #dceafe;

  --ac-contrast: #ffffff; /* text/icon on an accent fill */

  /* legacy aliases — keep older component classes (hub/legal/guides) working */
  --text: var(--ink);
  --text-soft: var(--ink-soft);
  --text-dim: var(--ink-dim);
  --border: var(--line);
  --surface-2: var(--surface);
  --accent: var(--indigo);
  --accent-2: var(--grape);
  --accent-contrast: #ffffff;
  --glass: color-mix(in srgb, var(--canvas) 84%, transparent);
  --shadow: var(--sticker);
  --glow: none;
}

[data-design="buddy"][data-theme="dusk"] {
  --bg: #16121f;
  --canvas: #211b30;
  --surface: #1a1527;
  --dot: #2a2440;

  --ink: #f3f0fb;
  --ink-soft: #ada6c2;
  --ink-dim: #948da9;
  --line: #0c0916;

  --indigo: #9d88ff;
  --indigo-600: #b3a3ff;
  --indigo-soft: #2a2350;
  --grape: #a98bff;

  --teal: #2dd4cf;
  --teal-soft: #16332f;
  --amber: #fbbf24;
  --amber-soft: #3a2d16;
  --sky: #60a5fa;
  --sky-soft: #1b2a45;
  --lime: #a3e635;
  --lime-soft: #26331a;
  --pink: #f472b6;
  --pink-soft: #3a2435;

  --ok: #34d399;
  --ok-soft: #193b30;
  --warn: #fbbf24;
  --warn-soft: #3a2d16;
  --danger: #fb7185;
  --danger-soft: #3a2433;
  --info: #60a5fa;
  --info-soft: #1b2a45;

  --ac-contrast: #16121f;

  --text: var(--ink);
  --text-soft: var(--ink-soft);
  --text-dim: var(--ink-dim);
  --border: var(--line);
  --surface-2: var(--surface);
  --accent: var(--indigo);
  --accent-2: var(--grape);
  --accent-contrast: #16121f;
  --glass: color-mix(in srgb, var(--canvas) 84%, transparent);
  --shadow: var(--sticker);
  --glow: none;
}

/* --- Accent mechanism (§3) ------------------------------------------------- */
/* The current state's kind sets a body class → two inherited vars consumed by
   the mascot, dB number, meter fill, status dot/bg and verdict bubble. These
   reference theme tokens, so they resolve correctly in both bright and dusk.
   IMPORTANT: never put a CSS transition on a background/color whose value is
   var(--ac*) on a rapidly-toggling element — it can stick mid-interpolation. */
body {
  --ac: var(--indigo);
  --ac-soft: var(--indigo-soft);
}
body.k-ok {
  --ac: var(--ok);
  --ac-soft: var(--ok-soft);
}
body.k-warn {
  --ac: var(--warn);
  --ac-soft: var(--warn-soft);
}
body.k-danger {
  --ac: var(--danger);
  --ac-soft: var(--danger-soft);
}
body.k-info {
  --ac: var(--info);
  --ac-soft: var(--info-soft);
}
body.k-neutral {
  --ac: var(--indigo);
  --ac-soft: var(--indigo-soft);
}

/* Honour a stronger-contrast preference by pushing soft/dim text to full ink. */
@media (prefers-contrast: more) {
  [data-design="buddy"] {
    --ink-soft: var(--ink);
    --ink-dim: var(--ink);
  }
}