/* ==========================================================================
   Design Tokens & Base Styles
   Foundation layer: CSS custom properties for colors, typography, spacing.
   Must load before all other app stylesheets.
   ========================================================================== */

:root {
  /* Debug fallback - SCREAMING NEON GREEN for broken CSS variables */
  --debug-fallback: #00ff00; /* Change to 'transparent' for production */

  /* ---------------------------------------------------------------------------
     Color Tokens — Bootstrap-aware with debug fallback
     --------------------------------------------------------------------------- */

  /* Primary Theme Colors */
  --app-primary: var(--bs-primary, var(--debug-fallback));
  --app-success: var(--bs-success, var(--debug-fallback));
  --app-danger: var(--bs-danger, var(--debug-fallback));
  --app-warning: var(--bs-warning, var(--debug-fallback));
  --app-info: var(--bs-info, var(--debug-fallback));
  --app-secondary: var(--bs-secondary, var(--debug-fallback));

  /* Text Colors */
  --app-text-primary: var(--bs-body-color, var(--debug-fallback));
  --app-text-secondary: var(--bs-secondary-color, var(--debug-fallback));
  --app-text-muted: var(--bs-secondary-color, var(--debug-fallback));

  /* Theme-Aware Backgrounds */
  --app-bg-body: var(--bs-body-bg, var(--debug-fallback));
  --app-bg-elevated: color-mix(in srgb, var(--app-bg-body) 85%, var(--app-text-primary) 15%);
  --app-bg-card: color-mix(in srgb, var(--app-bg-body) 90%, var(--app-text-primary) 10%);
  --app-bg-subtle: color-mix(in srgb, var(--app-bg-body) 80%, var(--app-text-primary) 20%);

  /* Border Colors */
  --app-border-primary: var(--bs-border-color, var(--debug-fallback));
  --app-border-secondary: color-mix(in srgb, var(--app-text-primary) 15%, transparent);
  --app-border-subtle: color-mix(in srgb, var(--app-text-primary) 8%, transparent);

  /* High Contrast Text */
  --app-text-contrast: var(--app-text-primary);
  --app-text-on-primary: color-mix(in srgb, var(--app-bg-body) 100%, transparent);

  /* Component-Specific Colors */
  --app-research-polling-bg: var(--app-bg-subtle);
  --app-research-progress-border: var(--app-info);
  --app-research-progress-bg: color-mix(in srgb, var(--app-info) 10%, var(--app-bg-body) 90%);
  --app-research-hover-border: var(--app-primary);
  --app-research-completed-border: var(--app-success);

  /* Interactive States */
  --app-hover-bg: color-mix(in srgb, var(--app-text-primary) 8%, transparent);
  --app-focus-outline: var(--app-primary);

  /* Shadows */
  --app-shadow-light: color-mix(in srgb, var(--app-text-primary) 5%, transparent);
  --app-shadow-medium: color-mix(in srgb, var(--app-text-primary) 10%, transparent);
  --app-shadow-focus: color-mix(in srgb, var(--app-primary) 25%, transparent);
  --app-shadow-overlay: color-mix(in srgb, var(--app-bg-body) 85%, transparent);

  /* Panel & Layout */
  --app-panel-bg: var(--app-bg-subtle);
  --app-panel-border: var(--app-border-subtle);
  --app-splitter-bg: var(--app-bg-subtle);
  --app-splitter-hover: var(--app-primary);
  --app-splitter-handle: var(--app-text-secondary);

  /* ---------------------------------------------------------------------------
     Typography Tokens
     --------------------------------------------------------------------------- */

  /* Font Families */
  --font-mono: "Roboto Mono", "Courier New", monospace;

  /* Font Size Scale — multiplied by --app-font-scale for S/M/L setting */
  --app-font-scale: 1;
  --font-size-xs: calc(0.7rem * var(--app-font-scale));     /* metadata labels */
  --font-size-sm: calc(0.8rem * var(--app-font-scale));     /* badges */
  --font-size-base: calc(0.875rem * var(--app-font-scale)); /* body text, icons */
  --font-size-md: calc(0.9rem * var(--app-font-scale));     /* in-progress status */
  --font-size-lg: calc(1rem * var(--app-font-scale));       /* placeholders, default */

  /* Line Height */
  --line-height: 1.6;

  /* Content Width */
  --content-max-width: 120ch;

  /* ---------------------------------------------------------------------------
     Spacing Tokens
     --------------------------------------------------------------------------- */
  --spacing-xs: 0.25rem;
  --spacing-sm: 0.5rem;
  --spacing-md: 0.75rem;
  --spacing-lg: 1rem;
  --spacing-xl: 2rem;
}

/* ==========================================================================
   Body Defaults
   Font-family, color, and background are owned by Bootstrap/Bootswatch themes.
   We only set properties that are theme-agnostic.
   ========================================================================== */

body {
  -webkit-font-smoothing: antialiased;
}