/* =============================================================================
 * Theme Variables - TrustRosie.io Branding
 *
 * TrustRosie.io - Build trust. Share knowledge. Stay in control.
 *
 * This file defines CSS custom properties for TrustRosie branding.
 * Primary colors use soft, professional tones that work well with the
 * Rosie pink accents.
 *
 * See BRANDING.md for the complete theming guide.
 * ============================================================================= */

:root {
  /* ==========================================================================
   * Logo Sizing
   * Controls navbar logo height; width is auto to preserve aspect ratio.
   * ========================================================================== */
  --theme-logo-height: 40px;

  /* ==========================================================================
   * Primary Brand Color
   * ========================================================================== */
  --theme-primary: var(--bs-primary, #0d6efd);
  --theme-primary-hover: var(--bs-primary-hover, #0b5ed7);
  --theme-primary-light: rgba(13, 110, 253, 0.08);

  /* Secondary/Accent color */
  --theme-secondary: #6c757d;
  --theme-accent: #0dcaf0;

  /* ==========================================================================
   * Typography
   * ========================================================================== */
  --theme-font-primary: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --theme-font-body: var(--theme-font-primary);
  --theme-font-heading: var(--theme-font-primary);

  /* ==========================================================================
   * Text Colors
   * ========================================================================== */
  --theme-text-primary: var(--bs-body-color, #212529);
  --theme-text-muted: var(--bs-secondary-color, #6c757d);
  --theme-text-heading: var(--bs-body-color, #212529);

  /* ==========================================================================
   * Background Colors
   * ========================================================================== */
  --theme-bg-body: #f0f2f5;
  --theme-bg-card: #ffffff;
  --theme-bg-nav: #ffffff;
  --theme-bg-surface: #f8f9fb;

  /* ==========================================================================
   * Border Colors
   * ========================================================================== */
  --theme-border-color: var(--bs-border-color, #dee2e6);
  --theme-border-radius: var(--bs-border-radius, 0.375rem);

  /* ==========================================================================
   * Elevation - Layered shadow scale for depth hierarchy
   * ========================================================================== */
  --theme-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.04);
  --theme-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);
  --theme-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.07), 0 2px 4px -2px rgba(0, 0, 0, 0.05);
  --theme-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.08), 0 4px 6px -4px rgba(0, 0, 0, 0.05);
  --theme-shadow-hover: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 4px 10px -5px rgba(0, 0, 0, 0.04);

  /* ==========================================================================
   * KPI Dashboard Colors (Professional palette)
   * ========================================================================== */
  --kpi-health-primary: #2563eb;
  --kpi-health-secondary: #0ea5e9;
  --kpi-health-light: #dbeafe;
  --kpi-health-bg: rgba(37, 99, 235, 0.1);

  --kpi-roc-primary: #f59e0b;
  --kpi-roc-secondary: #ea580c;
  --kpi-roc-light: #fef3c7;
  --kpi-roc-bg: rgba(245, 158, 11, 0.1);

  --kpi-revenue-primary: #10b981;
  --kpi-revenue-secondary: #14b8a6;
  --kpi-revenue-light: #d1fae5;
  --kpi-revenue-bg: rgba(16, 185, 129, 0.1);
}

/* =============================================================================
 * Dark Mode Overrides
 * ============================================================================= */
[data-bs-theme="dark"] {
  /* Primary colors - electric sky blue for dark mode readability */
  --theme-primary: #38bdf8;
  --theme-primary-hover: #7dd3fc;
  --theme-primary-light: rgba(56, 189, 248, 0.12);

  /* Text colors */
  --theme-text-primary: var(--bs-body-color, #dee2e6);
  --theme-text-muted: var(--bs-secondary-color, #adb5bd);
  --theme-text-heading: #f8f9fa;

  /* Background colors - layered surfaces for visual hierarchy */
  --theme-bg-body: #0f1117;
  --theme-bg-card: #1a1d24;
  --theme-bg-nav: #13151a;
  --theme-bg-surface: #1e2028;

  /* Border colors */
  --theme-border-color: rgba(255, 255, 255, 0.08);

  /* Elevation - border luminosity + glow for dark backgrounds */
  --theme-shadow-xs: 0 0 0 1px rgba(255, 255, 255, 0.04), 0 1px 2px rgba(0, 0, 0, 0.6);
  --theme-shadow-sm: 0 0 0 1px rgba(255, 255, 255, 0.06), 0 2px 4px rgba(0, 0, 0, 0.5);
  --theme-shadow-md: 0 0 0 1px rgba(255, 255, 255, 0.06), 0 4px 12px rgba(0, 0, 0, 0.6);
  --theme-shadow-lg: 0 0 0 1px rgba(255, 255, 255, 0.08), 0 8px 24px rgba(0, 0, 0, 0.7);
  --theme-shadow-hover: 0 0 0 1px rgba(255, 255, 255, 0.1), 0 8px 30px rgba(0, 0, 0, 0.7);

  /* KPI Dashboard Colors - adjusted for dark mode visibility */
  --kpi-health-primary: #60a5fa;
  --kpi-health-secondary: #3b82f6;
  --kpi-health-light: #1e3a8a;
  --kpi-health-bg: rgba(96, 165, 250, 0.15);

  --kpi-roc-primary: #fbbf24;
  --kpi-roc-secondary: #f59e0b;
  --kpi-roc-light: #92400e;
  --kpi-roc-bg: rgba(251, 191, 36, 0.15);

  --kpi-revenue-primary: #34d399;
  --kpi-revenue-secondary: #10b981;
  --kpi-revenue-light: #064e3b;
  --kpi-revenue-bg: rgba(52, 211, 153, 0.15);
}