/* ============================================
   Polly Dark Theme

   Dark variant for the consumer quoting
   experience. Overrides both --theme-* tokens
   and structural --color-* tokens for dark mode.

   Loaded after theme-polly.css — :root values
   here override the light theme defaults.
   ============================================ */
.theme-polly-dark {
  /* Primary accent — lighter for dark backgrounds */
  --theme-primary: #7c9cff;
  --theme-primary-hover: #9cb5ff;
  --theme-primary-focus: rgba(124, 156, 255, 0.15);

  /* Primary gradient — brighter for dark mode */
  --theme-gradient: linear-gradient(91deg, #8b7bff, #4ecfff);
  --theme-gradient-shadow: rgba(139, 123, 255, 0.3);
  --theme-gradient-shadow-hover: rgba(139, 123, 255, 0.45);

  /* Surface & background */
  --theme-bg: #0f1219;

  /* Aurora background blobs — subtler on dark */
  --theme-aurora-1: rgba(139, 123, 255, 0.06);
  --theme-aurora-2: rgba(78, 207, 255, 0.05);
  --theme-aurora-3: rgba(124, 156, 255, 0.04);
  --theme-aurora-4: rgba(78, 207, 255, 0.04);
  --theme-aurora-5: rgba(139, 123, 255, 0.03);

  /* Input borders */
  --theme-input-border: #3a4350;
  --theme-input-border-hover: #4f5b6b;

  /* Disabled state */
  --theme-disabled-text: #5a6478;
  --theme-disabled-border: #3a4350;

  /* Footer neutrals */
  --theme-footer-text: #8a94a6;
  --theme-footer-text-hover: #b0bac8;
  --theme-footer-copyright: #5a6478;

  /* Logo — same Polly logo works on dark */
  --theme-logo-url: url('/Polly_Logo_Gradient_RGB.svg');

  /* Fonts inherited from theme-polly.css (:root) — no override needed */

  /* ============================================
     Structural token overrides for dark mode
     These override values from tokens.css
     ============================================ */

  /* Surfaces */
  --color-background: #0f1219;
  --color-surface: #1a1f2e;
  --color-surface-hover: #242938;

  /* Borders */
  --color-border: #2e3644;
  --color-border-light: #242938;

  /* Disabled */
  --color-disabled: #3a4350;

  /* Text */
  --color-text: #e8ecf4;
  --color-text-muted: rgba(232, 236, 244, 0.6);
  --color-text-placeholder: rgba(232, 236, 244, 0.4);
  --color-text-inverse: #0f1219;

  /* Accent — used for hover borders on option buttons */
  --color-accent: #4ecfff;

  /* Interaction states — dark tints */
  --color-hover-tint: rgba(124, 156, 255, 0.1);
  --color-selected-tint: rgba(124, 156, 255, 0.15);
  --color-selected-hover-tint: rgba(124, 156, 255, 0.2);

  /* Shadows — more prominent on dark */
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.2);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.3), 0 1px 3px rgba(0, 0, 0, 0.2);
  --shadow-lg: 0 8px 20px rgba(0, 0, 0, 0.4), 0 2px 6px rgba(0, 0, 0, 0.25);
  --shadow-card: 0 2px 8px rgba(0, 0, 0, 0.25), 0 1px 3px rgba(0, 0, 0, 0.15);
  --shadow-card-hover: 0 6px 16px rgba(0, 0, 0, 0.35), 0 2px 6px rgba(0, 0, 0, 0.2);
  --shadow-card-selected: 0 0 0 2px rgba(124, 156, 255, 0.3), 0 2px 8px rgba(0, 0, 0, 0.2);

  /* Danger — brighter for dark bg */
  --color-danger: #fc8181;
  --color-danger-bg: rgba(252, 129, 129, 0.1);
  --color-danger-border: rgba(252, 129, 129, 0.3);

  /* Apply dark background directly on the wrapper
     since body sits outside the theme class scope */
  background-color: #0f1219;
  color: #e8ecf4;
}