/**
 * Color styles.
 *
 * Roles:
 * -bg        background fill (e.g., button)
 * -bg-hover  hover background fill
 * -fg        foreground for text on surface
 * -surface   background for surface
 * -text      text on base surface
 * -border    border for surface
 *
 * Hue/role tokens: each hue exposes bg / bg-hover / surface / fg / text / border.
 * `fg` is the on-color for a colored bg/surface; `text` is the hue as standalone
 * colored text on the neutral background. Semantic names (primary, error, …) alias a source hue.
 *
 * These tokens are literal custom properties on disk (not expanded at PostCSS time) because
 * several pipelines read the theme without our Vite plugin chain — notably Tailwind's
 * `@reference "…/main.css"` loader used by the lit-* packages, and tailwindcss's design-system
 * loader used in tests. Edit them here directly.
 */

@theme {
  /*
   * Semantic — each name aliases a source hue.
   */

  --color-primary-bg: var(--color-blue-bg);
  --color-primary-bg-hover: var(--color-blue-bg-hover);
  --color-primary-fg: var(--color-blue-fg);
  --color-primary-surface: var(--color-blue-surface);
  --color-primary-text: var(--color-blue-text);
  --color-primary-border: var(--color-blue-border);

  --color-secondary-bg: var(--color-green-bg);
  --color-secondary-bg-hover: var(--color-green-bg-hover);
  --color-secondary-fg: var(--color-green-fg);
  --color-secondary-surface: var(--color-green-surface);
  --color-secondary-text: var(--color-green-text);
  --color-secondary-border: var(--color-green-border);

  --color-info-bg: var(--color-cyan-bg);
  --color-info-bg-hover: var(--color-cyan-bg-hover);
  --color-info-fg: var(--color-cyan-fg);
  --color-info-surface: var(--color-cyan-surface);
  --color-info-text: var(--color-cyan-text);
  --color-info-border: var(--color-cyan-border);

  --color-success-bg: var(--color-emerald-bg);
  --color-success-bg-hover: var(--color-emerald-bg-hover);
  --color-success-fg: var(--color-emerald-fg);
  --color-success-surface: var(--color-emerald-surface);
  --color-success-text: var(--color-emerald-text);
  --color-success-border: var(--color-emerald-border);

  --color-warning-bg: var(--color-amber-bg);
  --color-warning-bg-hover: var(--color-amber-bg-hover);
  --color-warning-fg: var(--color-amber-fg);
  --color-warning-surface: var(--color-amber-surface);
  --color-warning-text: var(--color-amber-text);
  --color-warning-border: var(--color-amber-border);

  --color-error-bg: var(--color-rose-bg);
  --color-error-bg-hover: var(--color-rose-bg-hover);
  --color-error-fg: var(--color-rose-fg);
  --color-error-surface: var(--color-rose-surface);
  --color-error-text: var(--color-rose-text);
  --color-error-border: var(--color-rose-border);

  /*
   * Hue.
   */

  --color-neutral-bg: var(--color-neutral-600);
  --color-neutral-bg-hover: var(--color-neutral-700);
  --color-neutral-fg: var(--color-neutral-900);
  --color-neutral-surface: var(--color-neutral-400);
  --color-neutral-text: light-dark(var(--color-neutral-800), var(--color-neutral-500));
  --color-neutral-border: var(--color-neutral-600);

  --color-red-bg: var(--color-red-600);
  --color-red-bg-hover: var(--color-red-700);
  --color-red-fg: var(--color-red-900);
  --color-red-surface: var(--color-red-400);
  --color-red-text: light-dark(var(--color-red-800), var(--color-red-500));
  --color-red-border: var(--color-red-600);

  --color-orange-bg: var(--color-orange-600);
  --color-orange-bg-hover: var(--color-orange-700);
  --color-orange-fg: var(--color-orange-900);
  --color-orange-surface: var(--color-orange-400);
  --color-orange-text: light-dark(var(--color-orange-800), var(--color-orange-500));
  --color-orange-border: var(--color-orange-600);

  --color-amber-bg: var(--color-amber-600);
  --color-amber-bg-hover: var(--color-amber-700);
  --color-amber-fg: var(--color-amber-900);
  --color-amber-surface: var(--color-amber-400);
  --color-amber-text: light-dark(var(--color-amber-800), var(--color-amber-500));
  --color-amber-border: var(--color-amber-600);

  --color-yellow-bg: var(--color-yellow-600);
  --color-yellow-bg-hover: var(--color-yellow-700);
  --color-yellow-fg: var(--color-yellow-900);
  --color-yellow-surface: var(--color-yellow-400);
  --color-yellow-text: light-dark(var(--color-yellow-800), var(--color-yellow-500));
  --color-yellow-border: var(--color-yellow-600);

  --color-lime-bg: var(--color-lime-600);
  --color-lime-bg-hover: var(--color-lime-700);
  --color-lime-fg: var(--color-lime-900);
  --color-lime-surface: var(--color-lime-400);
  --color-lime-text: light-dark(var(--color-lime-800), var(--color-lime-500));
  --color-lime-border: var(--color-lime-600);

  --color-green-bg: var(--color-green-600);
  --color-green-bg-hover: var(--color-green-700);
  --color-green-fg: var(--color-green-900);
  --color-green-surface: var(--color-green-400);
  --color-green-text: light-dark(var(--color-green-800), var(--color-green-500));
  --color-green-border: var(--color-green-600);

  --color-emerald-bg: var(--color-emerald-600);
  --color-emerald-bg-hover: var(--color-emerald-700);
  --color-emerald-fg: var(--color-emerald-900);
  --color-emerald-surface: var(--color-emerald-400);
  --color-emerald-text: light-dark(var(--color-emerald-800), var(--color-emerald-500));
  --color-emerald-border: var(--color-emerald-600);

  --color-teal-bg: var(--color-teal-600);
  --color-teal-bg-hover: var(--color-teal-700);
  --color-teal-fg: var(--color-teal-900);
  --color-teal-surface: var(--color-teal-400);
  --color-teal-text: light-dark(var(--color-teal-800), var(--color-teal-500));
  --color-teal-border: var(--color-teal-600);

  --color-cyan-bg: var(--color-cyan-600);
  --color-cyan-bg-hover: var(--color-cyan-700);
  --color-cyan-fg: var(--color-cyan-900);
  --color-cyan-surface: var(--color-cyan-400);
  --color-cyan-text: light-dark(var(--color-cyan-800), var(--color-cyan-500));
  --color-cyan-border: var(--color-cyan-600);

  --color-sky-bg: var(--color-sky-600);
  --color-sky-bg-hover: var(--color-sky-700);
  --color-sky-fg: var(--color-sky-900);
  --color-sky-surface: var(--color-sky-400);
  --color-sky-text: light-dark(var(--color-sky-800), var(--color-sky-500));
  --color-sky-border: var(--color-sky-600);

  --color-blue-bg: var(--color-blue-600);
  --color-blue-bg-hover: var(--color-blue-700);
  --color-blue-fg: var(--color-blue-900);
  --color-blue-surface: var(--color-blue-400);
  --color-blue-text: light-dark(var(--color-blue-800), var(--color-blue-500));
  --color-blue-border: var(--color-blue-600);

  --color-indigo-bg: var(--color-indigo-600);
  --color-indigo-bg-hover: var(--color-indigo-700);
  --color-indigo-fg: var(--color-indigo-900);
  --color-indigo-surface: var(--color-indigo-400);
  --color-indigo-text: light-dark(var(--color-indigo-800), var(--color-indigo-500));
  --color-indigo-border: var(--color-indigo-600);

  --color-violet-bg: var(--color-violet-600);
  --color-violet-bg-hover: var(--color-violet-700);
  --color-violet-fg: var(--color-violet-900);
  --color-violet-surface: var(--color-violet-400);
  --color-violet-text: light-dark(var(--color-violet-800), var(--color-violet-500));
  --color-violet-border: var(--color-violet-600);

  --color-purple-bg: var(--color-purple-600);
  --color-purple-bg-hover: var(--color-purple-700);
  --color-purple-fg: var(--color-purple-900);
  --color-purple-surface: var(--color-purple-400);
  --color-purple-text: light-dark(var(--color-purple-800), var(--color-purple-500));
  --color-purple-border: var(--color-purple-600);

  --color-fuchsia-bg: var(--color-fuchsia-600);
  --color-fuchsia-bg-hover: var(--color-fuchsia-700);
  --color-fuchsia-fg: var(--color-fuchsia-900);
  --color-fuchsia-surface: var(--color-fuchsia-400);
  --color-fuchsia-text: light-dark(var(--color-fuchsia-800), var(--color-fuchsia-500));
  --color-fuchsia-border: var(--color-fuchsia-600);

  --color-pink-bg: var(--color-pink-600);
  --color-pink-bg-hover: var(--color-pink-700);
  --color-pink-fg: var(--color-pink-900);
  --color-pink-surface: var(--color-pink-400);
  --color-pink-text: light-dark(var(--color-pink-800), var(--color-pink-500));
  --color-pink-border: var(--color-pink-600);

  --color-rose-bg: var(--color-rose-600);
  --color-rose-bg-hover: var(--color-rose-700);
  --color-rose-fg: var(--color-rose-900);
  --color-rose-surface: var(--color-rose-400);
  --color-rose-text: light-dark(var(--color-rose-800), var(--color-rose-500));
  --color-rose-border: var(--color-rose-600);
}