/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */

/* Icon filters — light theme only, matches reference app globals.css */
:root {
  --icon-filter: brightness(0) saturate(100%);
  --icon-filter-active: brightness(0) saturate(100%) invert(39%) sepia(69%) saturate(600%) hue-rotate(195deg) brightness(95%) contrast(97%);

  /* Bridge design-update custom CSS to the current Tailwind theme token names. */
  --forge-surface-primary: var(--color-forge-surface-primary);
  --forge-surface-secondary: var(--color-forge-surface-secondary);
  --forge-surface-tertiary: var(--color-forge-surface-tertiary);
  --forge-text-primary: var(--color-forge-text-primary);
  --forge-text-secondary: var(--color-forge-text-secondary);
  --forge-text-tertiary: var(--color-forge-text-tertiary);
  --forge-border: var(--color-forge-border);
  --forge-border-strong: var(--color-forge-border-strong);
  --forge-interactive: var(--color-forge-interactive);
  --forge-interactive-hover: var(--color-forge-interactive-hover);
  --forge-blue-50: var(--color-forge-blue-50);
  --forge-blue-100: var(--color-forge-blue-100);
  --forge-blue-500: var(--color-forge-blue-500);
  --forge-blue-600: var(--color-forge-blue-600);
  --forge-green-500: var(--color-forge-green-500);
  --forge-red-500: var(--color-forge-red-500);
  --forge-success-text: var(--color-forge-success-text);
  --forge-danger-text: var(--color-forge-danger-text);
  --forge-warning-text: var(--color-forge-warning-text);
  --forge-green-50: var(--color-forge-green-50);
  --forge-green-100: var(--color-forge-green-100);
  --forge-green-500: var(--color-forge-green-500);
  --forge-green-600: var(--color-forge-green-600);
  --forge-green-700: var(--color-forge-green-700);
  --forge-red-50: var(--color-forge-red-50);
  --forge-red-100: var(--color-forge-red-100);
  --forge-red-500: var(--color-forge-red-500);
  --forge-red-600: var(--color-forge-red-600);
  --forge-red-700: var(--color-forge-red-700);
  --forge-gray-50: var(--color-forge-gray-50);
  --forge-gray-100: var(--color-forge-gray-100);
  --forge-gray-400: var(--color-forge-gray-400);
  --forge-amber-50: var(--color-forge-amber-50);
  --forge-amber-100: var(--color-forge-amber-100);
  --forge-amber-200: var(--color-forge-amber-200);
  --forge-amber-400: var(--color-forge-amber-400);
  --forge-amber-500: var(--color-forge-amber-500);
  --forge-amber-600: var(--color-forge-amber-600);
  --forge-amber-700: var(--color-forge-amber-700);
  --forge-shadow-sm: var(--shadow-forge-sm);
  --forge-shadow-md: var(--shadow-forge-md);

  /* Font family bridges (Tailwind emits --font-forge-*, custom CSS uses --forge-font-*) */
  --forge-font-sans:     var(--font-forge-sans);
  --forge-font-display:  var(--font-forge-display);
  --forge-font-headline: var(--font-forge-headline);
  --forge-font-mono:     var(--font-forge-mono);
}

/* Entity highlight spans in article body */
.entity-highlight {
  padding: 0 2px;
  border-radius: 2px;
  font-weight: 500;
  cursor: pointer;
  transition: background 150ms;
}
.entity-highlight--pos { background: var(--forge-green-50); color: var(--forge-green-700); }
.entity-highlight--pos:hover { background: var(--forge-green-100); }
.entity-highlight--neg { background: var(--forge-red-50); color: var(--forge-red-700); }
.entity-highlight--neg:hover { background: var(--forge-red-100); }
.entity-highlight--neu { background: var(--forge-blue-50); color: var(--forge-interactive-hover); }
.entity-highlight--neu:hover { background: var(--forge-blue-100); }