/* src/ui/styles/tokens.css
 * Design tokens — CSS custom properties for theming
 * ANCHOR: UI:DESIGN_TOKENS:ROOT
 * 
 * All components MUST use only --ogfo-* tokens for visual values.
 * Themes define the actual color/spacing/radius values via --_ogfo-* internal properties.
 */

/* Theme imports — MUST be at top-level before any other rules (CSS spec) */
@import url('./themes/dark.css');
@import url('./themes/cockpit.css');
@import url('./themes/neon-grid.css');

:root {

  /* Exported tokens for components to use */
  
  /* Backgrounds */
  --ogfo-bg-body: var(--_ogfo-bg-body);
  --ogfo-bg-card: var(--_ogfo-bg-card);
  --ogfo-bg-panel: var(--_ogfo-bg-panel);
  --ogfo-bg-header: var(--_ogfo-bg-header);

  /* Borders */
  --ogfo-border-default: var(--_ogfo-border-default);
  --ogfo-border-subtle: var(--_ogfo-border-subtle);
  --ogfo-border-accent-attacker: var(--_ogfo-border-accent-attacker);
  --ogfo-border-accent-defender: var(--_ogfo-border-accent-defender);

  /* Text */
  --ogfo-text-primary: var(--_ogfo-text-primary);
  --ogfo-text-muted: var(--_ogfo-text-muted);
  --ogfo-text-accent: var(--_ogfo-text-accent);

  /* Accents (attacker/defender) */
  --ogfo-accent-attacker: var(--_ogfo-accent-attacker);
  --ogfo-accent-attacker-bg: var(--_ogfo-accent-attacker-bg);
  --ogfo-accent-defender: var(--_ogfo-accent-defender);
  --ogfo-accent-defender-bg: var(--_ogfo-accent-defender-bg);

  /* Status colors */
  --ogfo-status-positive: var(--_ogfo-status-positive);
  --ogfo-status-negative: var(--_ogfo-status-negative);
  --ogfo-status-warning: var(--_ogfo-status-warning);
  --ogfo-status-running: var(--_ogfo-status-running);
  --ogfo-status-error: var(--_ogfo-status-error);

  /* Resource colors (semantic) */
  --ogfo-resource-metal: var(--_ogfo-resource-metal);
  --ogfo-resource-crystal: var(--_ogfo-resource-crystal);
  --ogfo-resource-deuterium: var(--_ogfo-resource-deuterium);

  /* CR Converter specific */
  --ogfo-cr-resource-amount: var(--_ogfo-cr-resource-amount);
  --ogfo-cr-destroyed: var(--_ogfo-cr-destroyed);

  /* ── Lifeform bonus display ── */

  /* LF badge (inline pill) — attacker side */
  --ogfo-lf-badge-bg-attacker: var(--_ogfo-lf-badge-bg-attacker);
  --ogfo-lf-badge-border-attacker: var(--_ogfo-lf-badge-border-attacker);
  --ogfo-lf-badge-text-attacker: var(--_ogfo-lf-badge-text-attacker);

  /* LF badge (inline pill) — defender side */
  --ogfo-lf-badge-bg-defender: var(--_ogfo-lf-badge-bg-defender);
  --ogfo-lf-badge-border-defender: var(--_ogfo-lf-badge-border-defender);
  --ogfo-lf-badge-text-defender: var(--_ogfo-lf-badge-text-defender);

  /* LF tier glow (table mode) */
  --ogfo-lf-glow-high: var(--_ogfo-lf-glow-high);
  --ogfo-lf-glow-medium: var(--_ogfo-lf-glow-medium);
  --ogfo-lf-glow-low: var(--_ogfo-lf-glow-low);

  /* LF tier bar fill (table mode) */
  --ogfo-lf-bar-high: var(--_ogfo-lf-bar-high);
  --ogfo-lf-bar-medium: var(--_ogfo-lf-bar-medium);
  --ogfo-lf-bar-low: var(--_ogfo-lf-bar-low);

  /* Status background tints */
  --ogfo-status-positive-bg: var(--_ogfo-status-positive-bg);
  --ogfo-status-negative-bg: var(--_ogfo-status-negative-bg);
  --ogfo-status-warning-bg: var(--_ogfo-status-warning-bg);
  --ogfo-status-error-bg: var(--_ogfo-status-error-bg);

  /* Status pill composites */
  --ogfo-pill-idle-bg: var(--_ogfo-pill-idle-bg);
  --ogfo-pill-idle-text: var(--_ogfo-pill-idle-text);
  --ogfo-pill-idle-border: var(--_ogfo-pill-idle-border);
  --ogfo-pill-running-bg: var(--_ogfo-pill-running-bg);
  --ogfo-pill-running-text: var(--_ogfo-pill-running-text);
  --ogfo-pill-running-border: var(--_ogfo-pill-running-border);
  --ogfo-pill-done-bg: var(--_ogfo-pill-done-bg);
  --ogfo-pill-done-text: var(--_ogfo-pill-done-text);
  --ogfo-pill-done-border: var(--_ogfo-pill-done-border);
  --ogfo-pill-error-bg: var(--_ogfo-pill-error-bg);
  --ogfo-pill-error-text: var(--_ogfo-pill-error-text);
  --ogfo-pill-error-border: var(--_ogfo-pill-error-border);

  /* Spacing (semantic) */
  --ogfo-spacing-xs: 4px;
  --ogfo-spacing-sm: 8px;
  --ogfo-spacing-md: 12px;
  --ogfo-spacing-lg: 16px;
  --ogfo-spacing-xl: 24px;

  /* Border radius */
  --ogfo-radius-sm: 4px;
  --ogfo-radius-md: 8px;
  --ogfo-radius-lg: 10px;
  --ogfo-radius-pill: 999px;

  /* Typography */
  --ogfo-font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --ogfo-font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  --ogfo-font-size-sm: 0.8rem;
  --ogfo-font-size-base: 0.9rem;
  --ogfo-font-size-lg: 0.95rem;

  /* Space background */
  --ogfo-space-bg-base: var(--_ogfo-space-bg-base);
  --ogfo-space-nebula-1: var(--_ogfo-space-nebula-1);
  --ogfo-space-nebula-2: var(--_ogfo-space-nebula-2);
  --ogfo-space-nebula-3: var(--_ogfo-space-nebula-3);
  --ogfo-space-overlay: var(--_ogfo-space-overlay);

  /* Cockpit / HUD effects */
  --ogfo-glow-primary: var(--_ogfo-glow-primary);
  --ogfo-glow-primary-intense: var(--_ogfo-glow-primary-intense);
  --ogfo-glass-bg: var(--_ogfo-glass-bg);
  --ogfo-glass-border: var(--_ogfo-glass-border);
  --ogfo-scanline-color: var(--_ogfo-scanline-color);
  --ogfo-hud-score-glow: var(--_ogfo-hud-score-glow);

  /* Extended effect tokens — glow borders, ambient animation, grid overlays */
  --ogfo-glow-border-color: var(--_ogfo-glow-border-color, transparent);
  --ogfo-glow-border-spread: var(--_ogfo-glow-border-spread, none);
  --ogfo-glow-border-hover: var(--_ogfo-glow-border-hover, none);
  --ogfo-ambient-pulse-color: var(--_ogfo-ambient-pulse-color, transparent);
  --ogfo-ambient-pulse-duration: var(--_ogfo-ambient-pulse-duration, 4s);
  --ogfo-grid-line-color: var(--_ogfo-grid-line-color, transparent);
  --ogfo-grid-line-size: var(--_ogfo-grid-line-size, 40px);
  --ogfo-glow-attacker: var(--_ogfo-glow-attacker, none);
  --ogfo-glow-defender: var(--_ogfo-glow-defender, none);
  --ogfo-glow-panel-attacker-spread: var(--_ogfo-glow-panel-attacker-spread, none);
  --ogfo-glow-panel-defender-spread: var(--_ogfo-glow-panel-defender-spread, none);
  --ogfo-connector-color-left: var(--_ogfo-connector-color-left, var(--ogfo-glow-primary-intense));
  --ogfo-connector-color-right: var(--_ogfo-connector-color-right, var(--ogfo-glow-primary-intense));
  --ogfo-connector-glow-left: var(--_ogfo-connector-glow-left, none);
  --ogfo-connector-glow-right: var(--_ogfo-connector-glow-right, none);
  --ogfo-focus-ring: var(--_ogfo-focus-ring, 0 0 0 2px rgba(100, 200, 255, 0.4));
  --ogfo-readout-glow: var(--_ogfo-readout-glow, none);
  --ogfo-readout-glow-positive: var(--_ogfo-readout-glow-positive, none);
  --ogfo-readout-glow-negative: var(--_ogfo-readout-glow-negative, none);
  --ogfo-transition-fast: var(--_ogfo-transition-fast, 150ms ease);
  --ogfo-transition-normal: var(--_ogfo-transition-normal, 300ms ease);
  --ogfo-transition-slow: var(--_ogfo-transition-slow, 600ms ease);
  --ogfo-corner-accent-size: var(--_ogfo-corner-accent-size, 0px);
  --ogfo-corner-accent-color: var(--_ogfo-corner-accent-color, transparent);

  /* Shadows — elevation & glow */
  --ogfo-shadow-elevated: var(--_ogfo-shadow-elevated);
  --ogfo-shadow-card: var(--_ogfo-shadow-card);
  --ogfo-shadow-card-hover: var(--_ogfo-shadow-card-hover);
  --ogfo-shadow-tooltip: var(--_ogfo-shadow-tooltip);
  --ogfo-shadow-subtle: var(--_ogfo-shadow-subtle);
  --ogfo-shadow-drawer: var(--_ogfo-shadow-drawer);
  --ogfo-shadow-sticky-top: var(--_ogfo-shadow-sticky-top);
  --ogfo-shadow-info-glow: var(--_ogfo-shadow-info-glow);
  --ogfo-shadow-positive-glow: var(--_ogfo-shadow-positive-glow);

  /* Semi-transparent surfaces */
  --ogfo-backdrop-bg: var(--_ogfo-backdrop-bg);
  --ogfo-bg-sticky: var(--_ogfo-bg-sticky);
  --ogfo-table-row-hover-bg: var(--_ogfo-table-row-hover-bg);

  /* Status border colors (gain/loss containers) */
  --ogfo-status-positive-border: var(--_ogfo-status-positive-border);
  --ogfo-status-negative-border: var(--_ogfo-status-negative-border);

  /* Button background (default state) */
  --ogfo-btn-bg: var(--_ogfo-btn-bg);
  --ogfo-btn-hover-bg: var(--_ogfo-btn-hover-bg);
}