/* Shared design tokens for NavVault side panel surfaces */
:root {
  /* Base Colors */
  --sp-bg-primary: #fbfdff;
  --sp-bg-secondary: #f3f7fb;
  --sp-bg-tertiary: #edf3f8;
  --sp-bg-hover: #e6eef7;

  /* Card / Panel Surfaces */
  --sp-card-bg: #f2f7fd;
  --sp-card-bg-hover: #eaf2fb;
  --sp-card-border: rgba(15, 23, 42, 0.08);
  --sp-window-chrome-bg: linear-gradient(135deg, #fbfdff, #eef4fb);
  --sp-panel-shadow: 0 30px 65px -25px rgba(2, 6, 23, 0.18);
  --sp-toolbar-bg: rgba(251, 253, 255, 0.85);
  --sp-toolbar-border: rgba(15, 23, 42, 0.12);

  /* Glass Effects */
  --sp-glass-bg: rgba(251, 253, 255, 0.7);
  --sp-glass-bg-strong: rgba(251, 253, 255, 0.85);
  --sp-glass-border: rgba(15, 23, 42, 0.10);
  --sp-glass-blur: 14px;
  --sp-glass-shadow: 0 10px 36px rgba(2, 6, 23, 0.10);
  --sp-glass-shadow-lg: 0 18px 54px rgba(2, 6, 23, 0.14);

  /* Text Colors */
  --sp-text-primary: #0b1220;
  --sp-text-secondary: #3d4b5f;
  --sp-text-tertiary: #72839a;

  /* Borders */
  --sp-border: rgba(15, 23, 42, 0.14);
  --sp-border-light: rgba(15, 23, 42, 0.08);
  --sp-border-subtle: rgba(15, 23, 42, 0.06);

  /* Accent Colors */
  --sp-accent: #22d3ee;
  --sp-accent-hover: #67e8f9;
  --sp-accent-light: rgba(34, 211, 238, 0.12);
  --sp-accent-glow: rgba(34, 211, 238, 0.28);

  /* Primary (alias for accent, used for pins/highlights) */
  --sp-primary: var(--sp-accent);
  --sp-primary-rgb: 34, 211, 238;

  /* Status Colors */
  --sp-success: #34d399;
  --sp-success-light: rgba(52, 211, 153, 0.12);
  --sp-error: #fb7185;
  --sp-error-light: rgba(251, 113, 133, 0.12);
  --sp-warning: #fbbf24;
  --sp-warning-light: rgba(251, 191, 36, 0.12);
  --sp-info: var(--sp-accent);
  --sp-info-light: rgba(34, 211, 238, 0.12);

  /* Status Badge Colors (for light backgrounds) */
  --sp-badge-success-bg: #dcfce7;
  --sp-badge-success-text: #166534;
  --sp-badge-error-bg: #fee2e2;
  --sp-badge-error-text: #991b1b;
  --sp-badge-warning-bg: #fef3c7;
  --sp-badge-warning-text: #92400e;
  --sp-badge-info-bg: #dbeafe;
  --sp-badge-info-text: #1e40af;

  /* Premium/Pro */
  --sp-pro: #fbbf24;
  --sp-pro-bg: rgba(251, 191, 36, 0.12);

  /* Star/Favorite */
  --sp-star: #eab308;
  --sp-star-light: rgba(234, 179, 8, 0.1);

  /* Message Bubble Gradients */
  --sp-user-gradient: linear-gradient(135deg, #e6fbff, #d7f1ff);
  --sp-ai-gradient: linear-gradient(135deg, #f2f7fd, #eaf2fb);
  --sp-card-shadow: 0 10px 22px rgba(2, 6, 23, 0.10);

  /* Border Radius */
  --sp-radius-sm: 10px;
  --sp-radius-md: 12px;
  --sp-radius-lg: 16px;
  --sp-radius-xl: 20px;

  /* Transitions */
  --sp-transition: 180ms cubic-bezier(0.2, 0.8, 0.2, 1);
  --sp-transition-slow: 320ms cubic-bezier(0.2, 0.8, 0.2, 1);

  /* Body Background */
  --sp-body-bg: radial-gradient(1200px 900px at 15% -10%, rgba(34, 211, 238, 0.22), transparent 55%),
    radial-gradient(900px 700px at 95% 10%, rgba(251, 191, 36, 0.18), transparent 55%),
    linear-gradient(180deg, #fbfdff 0%, #eef4fb 100%);

  /* Component: Avatar */
  --sp-avatar-bg: linear-gradient(135deg, rgba(34, 211, 238, 0.20), rgba(99, 102, 241, 0.14));
  --sp-avatar-color: #0b1220;
  --sp-avatar-shadow: 0 14px 28px rgba(2, 6, 23, 0.18);

  /* Component: Icon Buttons */
  --sp-icon-btn-bg: rgba(15, 23, 42, 0.06);
  --sp-icon-btn-color: var(--sp-text-secondary);
  --sp-icon-btn-hover-border: rgba(34, 211, 238, 0.45);
  --sp-icon-btn-hover-color: var(--sp-accent);
  --sp-icon-btn-active-color: #08101a;

  /* Component: Tabs */
  --sp-tab-bg: rgba(15, 23, 42, 0.07);
  --sp-tab-color: var(--sp-text-secondary);
  --sp-tab-hover-bg: rgba(34, 211, 238, 0.10);
  --sp-tab-hover-color: var(--sp-text-primary);

  /* Component: Toolbar */
  --sp-toolbar-btn-bg: rgba(15, 23, 42, 0.06);
  --sp-toolbar-btn-hover: rgba(34, 211, 238, 0.10);

  /* Component: Search */
  --sp-search-bg: rgba(251, 253, 255, 0.85);
  --sp-search-border: var(--sp-border);
  --sp-search-placeholder: var(--sp-text-tertiary);

  /* Component: Messages/Cards */
  --sp-message-hover-border: rgba(15, 23, 42, 0.14);
  --sp-message-platform-bg: rgba(34, 211, 238, 0.10);
  --sp-message-user-label: #0ea5e9;
  --sp-message-assistant-label: #34d399;
  --sp-message-preview: #2b3a4c;

  /* Component: Structure View */
  --sp-structure-h2: #64748b;
  --sp-structure-h3: #94a3b8;

  /* Component: Modals */
  --sp-modal-bg: #fbfdff;
  --sp-modal-border: rgba(15, 23, 42, 0.12);
  --sp-modal-shadow: 0 30px 70px -25px rgba(2, 6, 23, 0.22);

  /* Component: Token Count */
  --sp-token-bg: rgba(34, 211, 238, 0.10);
  --sp-token-color: var(--sp-text-secondary);

  /* Component: Folder Tree */
  --sp-folder-hover-bg: rgba(34, 211, 238, 0.10);
  --sp-folder-active-bg: rgba(34, 211, 238, 0.16);
  --sp-folder-icon-color: var(--sp-text-tertiary);

  /* Component: Pro pill */
  --sp-pro-gradient: linear-gradient(135deg, rgba(34, 211, 238, 0.95), rgba(99, 102, 241, 0.85));
  --sp-pro-shadow: 0 10px 22px rgba(34, 211, 238, 0.20);
}

/* Dark-mode tokens applied either by explicit data-theme or system preference */
:root[data-theme='dark'] {
  --sp-bg-primary: #070b11;
  --sp-bg-secondary: #0c121c;
  --sp-bg-tertiary: #0f1724;
  --sp-bg-hover: #142034;

  --sp-card-bg: #0e1623;
  --sp-card-bg-hover: #111c2d;
  --sp-card-border: rgba(230, 237, 243, 0.07);
  --sp-window-chrome-bg: radial-gradient(900px 650px at 10% 0%, rgba(34, 211, 238, 0.12), transparent 55%),
    radial-gradient(800px 600px at 95% 10%, rgba(99, 102, 241, 0.10), transparent 55%),
    linear-gradient(135deg, #0b111b, #070b11);
  --sp-panel-shadow: 0 40px 85px -35px rgba(0, 0, 0, 0.9);
  --sp-toolbar-bg: rgba(7, 11, 17, 0.65);
  --sp-toolbar-border: rgba(230, 237, 243, 0.10);

  --sp-glass-bg: rgba(12, 18, 28, 0.72);
  --sp-glass-bg-strong: rgba(12, 18, 28, 0.88);
  --sp-glass-border: rgba(230, 237, 243, 0.07);
  --sp-glass-shadow: 0 12px 44px rgba(0, 0, 0, 0.45);
  --sp-glass-shadow-lg: 0 20px 62px rgba(0, 0, 0, 0.58);

  --sp-text-primary: #e6edf3;
  --sp-text-secondary: rgba(230, 237, 243, 0.72);
  --sp-text-tertiary: rgba(230, 237, 243, 0.50);

  --sp-border: rgba(230, 237, 243, 0.12);
  --sp-border-light: rgba(230, 237, 243, 0.08);
  --sp-border-subtle: rgba(230, 237, 243, 0.06);

  --sp-accent: #22d3ee;
  --sp-accent-hover: #67e8f9;
  --sp-accent-light: rgba(34, 211, 238, 0.15);
  --sp-accent-glow: rgba(34, 211, 238, 0.33);

  /* Primary (alias for accent, used for pins/highlights) */
  --sp-primary: var(--sp-accent);
  --sp-primary-rgb: 34, 211, 238;

  --sp-success: #34d399;
  --sp-success-light: rgba(52, 211, 153, 0.16);
  --sp-error: #fb7185;
  --sp-error-light: rgba(251, 113, 133, 0.16);
  --sp-warning: #fbbf24;
  --sp-warning-light: rgba(251, 191, 36, 0.16);

  --sp-pro: #fbbf24;
  --sp-pro-bg: rgba(251, 191, 36, 0.16);
  --sp-star: #fde047;
  --sp-star-light: rgba(253, 224, 71, 0.14);

  --sp-user-gradient: linear-gradient(135deg, rgba(34, 211, 238, 0.10), rgba(99, 102, 241, 0.10));
  --sp-ai-gradient: linear-gradient(135deg, rgba(230, 237, 243, 0.06), rgba(230, 237, 243, 0.02));
  --sp-card-shadow: 0 24px 44px rgba(0, 0, 0, 0.55);

  /* Body Background */
  --sp-body-bg: radial-gradient(1100px 850px at 15% -10%, rgba(34, 211, 238, 0.18), transparent 58%),
    radial-gradient(900px 700px at 95% 10%, rgba(99, 102, 241, 0.14), transparent 58%),
    linear-gradient(180deg, #070b11 0%, #05070b 100%);

  /* Component: Avatar */
  --sp-avatar-bg: linear-gradient(135deg, rgba(34, 211, 238, 0.22), rgba(99, 102, 241, 0.18));
  --sp-avatar-color: #e6edf3;
  --sp-avatar-shadow: 0 18px 34px rgba(0, 0, 0, 0.55);

  /* Component: Icon Buttons */
  --sp-icon-btn-bg: rgba(230, 237, 243, 0.06);
  --sp-icon-btn-color: rgba(230, 237, 243, 0.72);
  --sp-icon-btn-hover-border: rgba(34, 211, 238, 0.45);
  --sp-icon-btn-hover-color: var(--sp-accent);
  --sp-icon-btn-active-color: #070b11;

  /* Component: Tabs */
  --sp-tab-bg: rgba(230, 237, 243, 0.06);
  --sp-tab-color: rgba(230, 237, 243, 0.72);
  --sp-tab-hover-bg: rgba(34, 211, 238, 0.10);
  --sp-tab-hover-color: #e6edf3;

  /* Component: Toolbar */
  --sp-toolbar-btn-bg: rgba(255, 255, 255, 0.03);
  --sp-toolbar-btn-hover: rgba(255, 255, 255, 0.08);

  /* Component: Search */
  --sp-search-bg: rgba(7, 11, 17, 0.55);
  --sp-search-border: rgba(230, 237, 243, 0.08);
  --sp-search-placeholder: rgba(230, 237, 243, 0.40);

  /* Component: Messages/Cards */
  --sp-message-hover-border: rgba(230, 237, 243, 0.12);
  --sp-message-platform-bg: rgba(34, 211, 238, 0.10);
  --sp-message-user-label: #38bdf8;
  --sp-message-assistant-label: #34d399;
  --sp-message-preview: rgba(230, 237, 243, 0.72);

  /* Component: Structure View */
  --sp-structure-h2: #94a3b8;
  --sp-structure-h3: #64748b;

  /* Component: Modals */
  --sp-modal-bg: #1a1f2e;
  --sp-modal-border: rgba(255, 255, 255, 0.08);
  --sp-modal-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);

  /* Component: Token Count */
  --sp-token-bg: rgba(34, 211, 238, 0.10);
  --sp-token-color: rgba(230, 237, 243, 0.72);

  /* Component: Folder Tree */
  --sp-folder-hover-bg: rgba(34, 211, 238, 0.10);
  --sp-folder-active-bg: rgba(34, 211, 238, 0.16);
  --sp-folder-icon-color: rgba(230, 237, 243, 0.50);

  /* Status Colors (dark mode) */
  --sp-info: var(--sp-accent);
  --sp-info-light: rgba(34, 211, 238, 0.15);

  /* Status Badge Colors (dark mode - higher contrast) */
  --sp-badge-success-bg: rgba(16, 185, 129, 0.2);
  --sp-badge-success-text: #34d399;
  --sp-badge-error-bg: rgba(239, 68, 68, 0.2);
  --sp-badge-error-text: #f87171;
  --sp-badge-warning-bg: rgba(245, 158, 11, 0.2);
  --sp-badge-warning-text: #fbbf24;
  --sp-badge-info-bg: rgba(34, 211, 238, 0.2);
  --sp-badge-info-text: #67e8f9;

  /* Component: Pro pill */
  --sp-pro-gradient: linear-gradient(135deg, rgba(34, 211, 238, 0.95), rgba(99, 102, 241, 0.85));
  --sp-pro-shadow: 0 12px 26px rgba(34, 211, 238, 0.18);
}

/* ============================================
   High Contrast Mode - Light Theme (WCAG 2.1 AAA - 7:1 ratio)
   Applied when: data-theme="light" + .high-contrast class
   ============================================ */
:root[data-theme='light'].high-contrast {
  /* High contrast light: white bg, black text */
  --sp-bg-primary: #ffffff;
  --sp-bg-secondary: #f0f0f0;
  --sp-bg-tertiary: #e5e5e5;
  --sp-bg-hover: #d9d9d9;

  /* Card surfaces - solid, max contrast */
  --sp-card-bg: #ffffff;
  --sp-card-bg-hover: #f5f5f5;
  --sp-card-border: #000000;
  --sp-window-chrome-bg: #ffffff;
  --sp-panel-shadow: none;
  --sp-toolbar-bg: #ffffff;
  --sp-toolbar-border: #000000;

  /* No glass effects in high contrast */
  --sp-glass-bg: #ffffff;
  --sp-glass-bg-strong: #ffffff;
  --sp-glass-border: #000000;
  --sp-glass-shadow: none;
  --sp-glass-shadow-lg: none;

  /* Maximum contrast text - black on white */
  --sp-text-primary: #000000;
  --sp-text-secondary: #1a1a1a;
  --sp-text-tertiary: #333333;

  /* Strong visible borders */
  --sp-border: #000000;
  --sp-border-light: #333333;
  --sp-border-subtle: #666666;

  /* High visibility accent - darker for light bg */
  --sp-accent: #0066cc;
  --sp-accent-hover: #0052a3;
  --sp-accent-light: rgba(0, 102, 204, 0.2);
  --sp-accent-glow: rgba(0, 102, 204, 0.3);

  /* Primary */
  --sp-primary: #cc0066;
  --sp-primary-rgb: 204, 0, 102;

  /* Status colors - high saturation, dark for light bg */
  --sp-success: #008844;
  --sp-success-light: rgba(0, 136, 68, 0.2);
  --sp-error: #cc0000;
  --sp-error-light: rgba(204, 0, 0, 0.2);
  --sp-warning: #996600;
  --sp-warning-light: rgba(153, 102, 0, 0.2);

  /* Premium/Star */
  --sp-pro: #996600;
  --sp-pro-bg: rgba(153, 102, 0, 0.2);
  --sp-star: #cc9900;
  --sp-star-light: rgba(204, 153, 0, 0.2);

  /* No gradients - solid colors */
  --sp-user-gradient: #e0e8f0;
  --sp-ai-gradient: #f0f5f0;
  --sp-card-shadow: none;

  /* Body background - solid white */
  --sp-body-bg: #ffffff;

  /* Avatar */
  --sp-avatar-bg: #e0e0e0;
  --sp-avatar-color: #000000;
  --sp-avatar-shadow: none;

  /* Disable transitions for clarity */
  --sp-transition: 0ms;
  --sp-transition-slow: 0ms;
}

/* ============================================
   High Contrast Mode - Dark Theme (WCAG 2.1 AAA - 7:1 ratio)
   Applied when: data-theme="dark" + .high-contrast class
   ============================================ */
:root[data-theme='dark'].high-contrast {
  /* High contrast dark: black bg, white text */
  --sp-bg-primary: #000000;
  --sp-bg-secondary: #0a0a0a;
  --sp-bg-tertiary: #141414;
  --sp-bg-hover: #1f1f1f;

  /* Card surfaces - solid, no transparency */
  --sp-card-bg: #0a0a0a;
  --sp-card-bg-hover: #1a1a1a;
  --sp-card-border: #666666;
  --sp-window-chrome-bg: #000000;
  --sp-panel-shadow: none;
  --sp-toolbar-bg: #000000;
  --sp-toolbar-border: #666666;

  /* No glass effects in high contrast */
  --sp-glass-bg: #000000;
  --sp-glass-bg-strong: #0a0a0a;
  --sp-glass-border: #555555;
  --sp-glass-shadow: none;
  --sp-glass-shadow-lg: none;

  /* Maximum contrast text - white on black */
  --sp-text-primary: #ffffff;
  --sp-text-secondary: #e0e0e0;
  --sp-text-tertiary: #b0b0b0;

  /* Strong visible borders */
  --sp-border: #888888;
  --sp-border-light: #666666;
  --sp-border-subtle: #444444;

  /* High visibility accent - bright for dark bg */
  --sp-accent: #00d4ff;
  --sp-accent-hover: #66e5ff;
  --sp-accent-light: rgba(0, 212, 255, 0.3);
  --sp-accent-glow: rgba(0, 212, 255, 0.5);

  /* Primary */
  --sp-primary: #ff66ff;
  --sp-primary-rgb: 255, 102, 255;

  /* Status colors - high saturation, bright for dark bg */
  --sp-success: #00ff88;
  --sp-success-light: rgba(0, 255, 136, 0.3);
  --sp-error: #ff4444;
  --sp-error-light: rgba(255, 68, 68, 0.3);
  --sp-warning: #ffcc00;
  --sp-warning-light: rgba(255, 204, 0, 0.3);

  /* Premium/Star */
  --sp-pro: #ffcc00;
  --sp-pro-bg: rgba(255, 204, 0, 0.3);
  --sp-star: #ffff00;
  --sp-star-light: rgba(255, 255, 0, 0.3);

  /* No gradients - solid colors */
  --sp-user-gradient: #1a1a4a;
  --sp-ai-gradient: #0a2a2a;
  --sp-card-shadow: none;

  /* Body background - solid black */
  --sp-body-bg: #000000;

  /* Avatar */
  --sp-avatar-bg: #222222;
  --sp-avatar-color: #ffffff;
  --sp-avatar-shadow: none;

  /* Disable transitions for clarity */
  --sp-transition: 0ms;
  --sp-transition-slow: 0ms;
}

/* ============================================
   Focus Ring Token (Accessibility)
   ============================================ */
:root {
  --sp-focus-ring: 0 0 0 2px var(--sp-accent);
  --sp-focus-ring-offset: 2px;
}

/* ============================================
   Reduced Motion (WCAG 2.3.3)
   ============================================ */
@media (prefers-reduced-motion: reduce) {

  :root,
  :root[data-theme='dark'],
  :root[data-theme='light'],
  :root[data-theme='high-contrast'] {
    --sp-transition: 0ms !important;
    --sp-transition-slow: 0ms !important;
  }

  /* Disable all animations */
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Manual reduced motion override (via settings toggle) */
:root.reduced-motion,
:root.reduced-motion[data-theme='dark'],
:root.reduced-motion[data-theme='light'],
:root.reduced-motion[data-theme='high-contrast'] {
  --sp-transition: 0ms !important;
  --sp-transition-slow: 0ms !important;
}

:root.reduced-motion *,
:root.reduced-motion *::before,
:root.reduced-motion *::after {
  animation-duration: 0.01ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: 0.01ms !important;
  scroll-behavior: auto !important;
}