/* ============================================================
   GENESYS ANALYTICS — DESIGN TOKEN SYSTEM
   themes.css: All CSS custom properties for dark + light mode
   ============================================================ */

/* ── Shared constants (theme-independent) ── */
:root {
  --sidebar-width: 260px;
  --sidebar-collapsed: 64px;
  --topbar-height: 60px;
  --transition-fast: 0.15s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-base: 0.22s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: 'JetBrains Mono', 'Fira Code', 'Cascadia Code', monospace;

  --radius-xs:  4px;
  --radius-sm:  8px;
  --radius-md:  12px;
  --radius-lg:  16px;
  --radius-xl:  20px;
  --radius-2xl: 24px;
  --radius-full: 9999px;

  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-7:  28px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;

  /* Brand gradient */
  --gradient-brand: linear-gradient(135deg, #4F6EF7 0%, #7C5CE7 100%);
  --gradient-brand-soft: linear-gradient(135deg, rgba(79,110,247,0.15) 0%, rgba(124,92,231,0.15) 100%);
  --gradient-success: linear-gradient(135deg, #00D68F 0%, #00B5D8 100%);
  --gradient-danger:  linear-gradient(135deg, #FF3B5C 0%, #FF6B35 100%);
  --gradient-warning: linear-gradient(135deg, #FFBE21 0%, #FF9500 100%);

  /* Semantic colors (same in both themes) */
  --color-primary:   #4F6EF7;
  --color-primary-hover: #3D5AE0;
  --color-accent:    #7C5CE7;
  --color-success:   #00D68F;
  --color-warning:   #FFBE21;
  --color-danger:    #FF3B5C;
  --color-info:      #00B5D8;
}

/* ================================================================
   DARK THEME  (default)
   ================================================================ */
html[data-theme="dark"] {
  color-scheme: dark;

  /* Backgrounds */
  --bg:              #080C18;
  --bg-secondary:    #0D1525;
  --bg-tertiary:     #111E35;
  --sidebar-bg:      #080C18;
  --topbar-bg:       rgba(8, 12, 24, 0.9);
  --card-bg:         #0F1929;
  --card-bg-hover:   #131F32;
  --overlay:         rgba(0, 0, 0, 0.6);

  /* Borders & Dividers */
  --border:          rgba(255, 255, 255, 0.07);
  --border-strong:   rgba(255, 255, 255, 0.14);
  --border-focus:    rgba(79, 110, 247, 0.5);
  --divider:         rgba(255, 255, 255, 0.05);

  /* Text */
  --text-primary:    #F0F4FF;
  --text-secondary:  #8B9CB8;
  --text-muted:      #5A6A84;
  --text-disabled:   #2E3D55;
  --text-inverse:    #080C18;
  --text-link:       #7B9EFF;

  /* Navigation */
  --nav-section-label: rgba(255, 255, 255, 0.28);
  --nav-item-color:    rgba(255, 255, 255, 0.65);
  --nav-item-icon:     rgba(255, 255, 255, 0.38);
  --nav-item-hover-bg: rgba(255, 255, 255, 0.055);
  --nav-item-active-bg: rgba(79, 110, 247, 0.15);
  --nav-item-active-border: #4F6EF7;
  --nav-item-active-color:  #7B9EFF;

  /* Inputs */
  --input-bg:        rgba(255, 255, 255, 0.04);
  --input-bg-hover:  rgba(255, 255, 255, 0.07);
  --input-border:    rgba(255, 255, 255, 0.1);
  --input-placeholder: rgba(255, 255, 255, 0.28);

  /* Shadows */
  --shadow-sm:   0 1px 3px rgba(0, 0, 0, 0.4);
  --shadow-md:   0 4px 16px rgba(0, 0, 0, 0.4), 0 1px 3px rgba(0, 0, 0, 0.3);
  --shadow-lg:   0 8px 32px rgba(0, 0, 0, 0.5), 0 2px 8px rgba(0, 0, 0, 0.3);
  --shadow-glow: 0 0 24px rgba(79, 110, 247, 0.25);

  /* Scrollbar */
  --scrollbar-thumb: rgba(255, 255, 255, 0.1);
  --scrollbar-track: transparent;

  /* Chart grid */
  --chart-grid: rgba(255, 255, 255, 0.05);
  --chart-text: #5A6A84;

  /* Status badge backgrounds */
  --badge-success-bg: rgba(0, 214, 143, 0.12);
  --badge-warning-bg: rgba(255, 190, 33, 0.12);
  --badge-danger-bg:  rgba(255, 59, 92, 0.12);
  --badge-info-bg:    rgba(0, 181, 216, 0.12);
  --badge-neutral-bg: rgba(255, 255, 255, 0.07);

  /* KPI card icon gradients */
  --kpi-blue-bg:   linear-gradient(135deg, #4F6EF7, #2D4FD6);
  --kpi-green-bg:  linear-gradient(135deg, #00D68F, #00A36C);
  --kpi-amber-bg:  linear-gradient(135deg, #FFBE21, #E59A00);
  --kpi-purple-bg: linear-gradient(135deg, #7C5CE7, #5B3CC4);
}

/* ================================================================
   LIGHT THEME
   ================================================================ */
html[data-theme="light"] {
  color-scheme: light;

  /* Backgrounds */
  --bg:              #F4F6FA; /* Soft cool-grey page background */
  --bg-secondary:    #FFFFFF; /* White top banner & sidebar */
  --bg-tertiary:     #E9ECF4; /* Hover container backgrounds */
  --sidebar-bg:      #FFFFFF; /* Pure white sidebar */
  --topbar-bg:       rgba(255, 255, 255, 0.9); /* Translucent white top bar */
  --card-bg:         #FFFFFF; /* Pure white card containers */
  --card-bg-hover:   #F8FAFE; /* Soft blue-grey hover */
  --overlay:         rgba(0, 0, 0, 0.2);

  /* Borders & Dividers */
  --border:          rgba(0, 0, 0, 0.08);
  --border-strong:   rgba(0, 0, 0, 0.15);
  --border-focus:    rgba(79, 110, 247, 0.4);
  --divider:         rgba(0, 0, 0, 0.06);

  /* Text */
  --text-primary:    #0D1525; /* Dark grey primary text */
  --text-secondary:  #4A5A74; /* Mid-contrast secondary text */
  --text-muted:      #7C8BA1; /* Soft readable muted text */
  --text-disabled:   #BAC5D6; /* Disabled text */
  --text-inverse:    #FFFFFF; /* White text on dark elements */
  --text-link:       #4F6EF7;

  /* Navigation */
  --nav-section-label: #8A9CB6;
  --nav-item-color:    #4A5A74;
  --nav-item-icon:     #8A9CB6;
  --nav-item-hover-bg: rgba(0, 0, 0, 0.035);
  --nav-item-active-bg: rgba(79, 110, 247, 0.08);
  --nav-item-active-border: #4F6EF7;
  --nav-item-active-color:  #4F6EF7;

  /* Inputs */
  --input-bg:        rgba(0, 0, 0, 0.025);
  --input-bg-hover:  rgba(0, 0, 0, 0.045);
  --input-border:    rgba(0, 0, 0, 0.08);
  --input-placeholder: rgba(0, 0, 0, 0.35);

  /* Shadows */
  --shadow-sm:   0 1px 3px rgba(0, 0, 0, 0.05);
  --shadow-md:   0 4px 16px rgba(0, 0, 0, 0.06), 0 1px 3px rgba(0, 0, 0, 0.03);
  --shadow-lg:   0 8px 32px rgba(0, 0, 0, 0.08), 0 2px 8px rgba(0, 0, 0, 0.04);
  --shadow-glow: 0 0 24px rgba(79, 110, 247, 0.1);

  /* Scrollbar */
  --scrollbar-thumb: rgba(0, 0, 0, 0.12);
  --scrollbar-track: transparent;

  /* Chart grid */
  --chart-grid: rgba(0, 0, 0, 0.05);
  --chart-text: #7C8BA1;

  /* Status badge backgrounds */
  --badge-success-bg: rgba(0, 169, 112, 0.08);
  --badge-warning-bg: rgba(204, 152, 0, 0.08);
  --badge-danger-bg:  rgba(204, 47, 73, 0.08);
  --badge-info-bg:    rgba(0, 144, 172, 0.08);
  --badge-neutral-bg: rgba(0, 0, 0, 0.05);

  /* KPI card icon gradients */
  --kpi-blue-bg:   linear-gradient(135deg, #4F6EF7, #2D4FD6);
  --kpi-green-bg:  linear-gradient(135deg, #00C07D, #009060);
  --kpi-amber-bg:  linear-gradient(135deg, #E5A800, #C88000);
  --kpi-purple-bg: linear-gradient(135deg, #7C5CE7, #5B3CC4);
}

/* ── Custom Logo contrast support for Light Theme ── */
html[data-theme="light"] #sidebar-custom-logo-img,
html[data-theme="light"] #mobile-custom-logo-img {
  background: #0D1525; /* dark backplate background */
  padding: 6px 12px;
  border-radius: 6px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}