/* Semantic tokens — aliases referencing primitives via var().
   Components use ONLY semantic tokens, never primitives.
   @theme inline registers tokens with Tailwind for utility class generation.
   The `inline` keyword forces runtime var() resolution (required for theme switching). */

/* Register semantic tokens with Tailwind v4 for utility class generation */
@theme inline {
  /* Color utilities: bg-primary, text-primary, border-primary, etc. */
  --color-primary: var(--hh-color-primary);
  --color-primary-light: var(--hh-color-primary-light);
  --color-primary-dark: var(--hh-color-primary-dark);
  --color-secondary: var(--hh-color-secondary);
  --color-secondary-light: var(--hh-color-secondary-light);
  --color-secondary-dark: var(--hh-color-secondary-dark);
  --color-background: var(--hh-color-bg);
  --color-surface: var(--hh-color-surface);
  --color-surface-raised: var(--hh-color-surface-raised);
  --color-text: var(--hh-color-text);
  --color-text-muted: var(--hh-color-text-muted);
  --color-text-dim: var(--hh-color-text-dim);
  --color-error: var(--hh-color-error);
  --color-warning: var(--hh-color-warning);
  --color-success: var(--hh-color-success);
  --color-border: var(--hh-color-border);
  --color-border-bright: var(--hh-color-border-bright);

  /* Font utilities: font-mono, font-display */
  --font-mono: var(--hh-font-mono);
  --font-display: var(--hh-font-display);
}

/* === Default theme: Cyberpunk === */
/* Applied both as :root fallback and under [data-theme="cyberpunk"] selector.
   Semantic tokens map to primitives. Switching themes overrides these mappings. */

:root,
[data-theme="cyberpunk"] {
  /* --- Colors --- */
  --hh-color-primary: var(--hh-raw-cyan-500);
  --hh-color-primary-light: var(--hh-raw-cyan-400);
  --hh-color-primary-dark: var(--hh-raw-cyan-600);
  --hh-color-secondary: var(--hh-raw-magenta-500);
  --hh-color-secondary-light: var(--hh-raw-magenta-400);
  --hh-color-secondary-dark: var(--hh-raw-magenta-600);
  --hh-color-bg: var(--hh-raw-void-start);
  --hh-color-surface: var(--hh-raw-gray-900);
  --hh-color-surface-raised: var(--hh-raw-gray-800);
  --hh-color-text: var(--hh-raw-gray-50);
  --hh-color-text-muted: var(--hh-raw-gray-400);
  --hh-color-text-dim: var(--hh-raw-gray-600);
  --hh-color-error: var(--hh-raw-red-500);
  --hh-color-warning: var(--hh-raw-lime-500);
  --hh-color-success: var(--hh-raw-green-500);
  --hh-color-border: var(--hh-raw-gray-800);
  --hh-color-border-bright: var(--hh-raw-gray-700);

  /* --- Fonts (also in typography.css but aliased here for semantic access) --- */
  --hh-font-mono: 'Fira Code', ui-monospace, 'Cascadia Code', 'Consolas', monospace;
  --hh-font-display: 'Share Tech', system-ui, -apple-system, sans-serif;

  /* --- Background gradient --- */
  --hh-bg-gradient: linear-gradient(
    180deg,
    var(--hh-raw-void-start) 0%,
    var(--hh-raw-void-mid) 50%,
    var(--hh-raw-void-end) 100%
  );
}