/* Scale With AI - CSS Variables */

:root {
  /* Scale With AI Branded Color Palette */
  --swa-purple-900: #32158F;
  --swa-purple-700: #5B35E8;
  --swa-purple-600: #6C4BFF;
  --swa-purple-400: #9C86FF;
  --swa-purple-200: #DCD3FF;
  --swa-purple-100: #EEEAFE;

  --swa-indigo: #4E5FE7;
  --swa-blue: #4C86F7;
  --swa-cyan: #42BFD8;
  --swa-green: #25A875;
  --swa-amber: #D99525;
  --swa-red: #D7515E;

  --swa-ink: #16151E;
  --swa-muted: #686777;
  --swa-surface: #FFFFFF;
  --swa-surface-soft: #F7F5FC;
  --swa-surface-purple: #F1EDFF;

  --swa-bg-main: var(--swa-surface-soft);
  --swa-bg-surface: var(--swa-surface);
  --swa-bg-soft: var(--swa-surface-purple);
  --swa-bg-dark: var(--swa-ink);

  --swa-text-primary: var(--swa-ink);
  --swa-text-secondary: var(--swa-muted);
  --swa-text-muted: #8B8B98;
  --swa-text-inverse: #FFFFFF;

  --swa-purple-primary: var(--swa-purple-600);
  --swa-purple-dark: var(--swa-purple-900);
  --swa-purple-light: var(--swa-purple-400);
  --swa-purple-soft: var(--swa-purple-100);

  --swa-border: #E5E3EB;
  --swa-border-strong: #D5D1DF;
  --swa-purple-gradient: linear-gradient(135deg, var(--swa-purple-600), var(--swa-purple-900));

  --swa-success: var(--swa-green);
  --swa-success-soft: #E9F7F1;
  --swa-warning: var(--swa-amber);
  --swa-warning-soft: #FFF4DC;
  --swa-error: var(--swa-red);
  --swa-error-soft: #FDECEF;
  --swa-info: var(--swa-blue);
  --swa-info-soft: #EDF3FF;
  --primary-color: var(--swa-purple-primary);
  --primary-hover: var(--swa-purple-dark);
  --primary-light: var(--swa-purple-soft);
  --primary-border: var(--swa-border-strong);
  
  --bg-primary: var(--swa-bg-surface);
  --bg-secondary: var(--swa-bg-main);
  --bg-tertiary: var(--swa-bg-soft);
  
  --text-primary: var(--swa-text-primary);
  --text-secondary: var(--swa-text-secondary);
  --text-muted: var(--swa-text-muted);
  
  --border-color: var(--swa-border);
  --border-light: var(--swa-border);
  
  --color-success: var(--swa-success);
  --color-success-light: var(--swa-success-soft);
  --color-warning: var(--swa-warning);
  --color-warning-light: var(--swa-warning-soft);
  --color-danger: var(--swa-error);
  --color-danger-light: var(--swa-error-soft);
  --color-info: var(--swa-info);
  --color-info-light: var(--swa-info-soft);
  
  /* Typography */
  --font-family: 'Inter', 'Manrope', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-mono: 'SFMono-Regular', Consolas, "Liberation Mono", Menlo, monospace;
  
  /* Spacing */
  --spacing-xs: 0.25rem; /* 4px */
  --spacing-sm: 0.5rem;  /* 8px */
  --spacing-md: 1rem;   /* 16px */
  --spacing-lg: 1.5rem;  /* 24px */
  --spacing-xl: 2rem;    /* 32px */
  --spacing-xxl: 3rem;   /* 48px */
  
  /* Borders & Radius */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-full: 9999px;
  
  /* Shadows */
  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.05), 0 4px 6px -2px rgba(0, 0, 0, 0.02);
  --shadow-purple: 0 4px 14px 0 rgba(109, 40, 217, 0.15);
  
  /* Animation */
  --transition-fast: 0.15s ease;
  --transition-normal: 0.25s ease;
  --transition-slow: 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  
  /* Layout Sizing */
  --sidebar-width: 260px;
  --header-height: 70px;
}

/* ============================================================
   DARK MODE ARCHITECTURE — "Dark Sidebar + Light Content"
   ============================================================
   The sidebar uses scoped CSS custom properties that override
   the design tokens only within .app-sidebar, giving it a
   permanent dark appearance.
   
   The content area (.app-main) explicitly resets every token
   back to light-mode values inside the dark media query, so
   the dashboard cards/views are always readable regardless of
   the user's OS setting.
   ============================================================ */

/* ── Sidebar: always dark ────────────────────────────────── */
.app-sidebar {
  --bg-primary:     #13121C;
  --bg-secondary:   #1A192A;
  --bg-tertiary:    #1F1D30;
  --text-primary:   #EAE9F5;
  --text-secondary: #A09FB8;
  --text-muted:     #6C6B82;
  --border-color:   #2A2840;
  --border-light:   #2A2840;
  --primary-color:  #9B82FF;
  --primary-hover:  #B8A3FF;
  --primary-light:  rgba(155, 130, 255, 0.15);
  --primary-border: rgba(155, 130, 255, 0.25);
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.4);
  --shadow-md: 0 4px 8px rgba(0,0,0,0.5);
}

/* ── Content area: lock to light mode always ─────────────── */
@media (prefers-color-scheme: dark) {
  .app-main,
  .modal-overlay,
  .modal-container,
  .search-overlay,
  .search-modal,
  .toast {
    --swa-surface:        #FFFFFF;
    --swa-surface-soft:   #F7F5FC;
    --swa-surface-purple: #F1EDFF;
    --swa-bg-main:        #F7F5FC;
    --swa-bg-surface:     #FFFFFF;
    --swa-bg-soft:        #F1EDFF;
    --swa-ink:            #16151E;
    --swa-muted:          #686777;
    --swa-text-muted:     #8B8B98;
    --swa-border:         #E5E3EB;
    --swa-border-strong:  #D5D1DF;
    --swa-purple-600:     #6C4BFF;
    --swa-purple-400:     #9C86FF;
    --swa-purple-200:     #DCD3FF;
    --swa-purple-100:     #EEEAFE;
    --swa-success-soft:   #E9F7F1;
    --swa-warning-soft:   #FFF4DC;
    --swa-error-soft:     #FDECEF;
    --swa-info-soft:      #EDF3FF;
    --bg-primary:         #FFFFFF;
    --bg-secondary:       #F7F5FC;
    --bg-tertiary:        #F1EDFF;
    --text-primary:       #16151E;
    --text-secondary:     #686777;
    --text-muted:         #8B8B98;
    --border-color:       #E5E3EB;
    --border-light:       #E5E3EB;
    --primary-color:      #6C4BFF;
    --primary-hover:      #32158F;
    --primary-light:      #EEEAFE;
    --primary-border:     #D5D1DF;
    --color-success:       #25A875;
    --color-success-light: #E9F7F1;
    --color-warning:       #D99525;
    --color-warning-light: #FFF4DC;
    --color-danger:        #D7515E;
    --color-danger-light:  #FDECEF;
    --color-info:          #4C86F7;
    --color-info-light:    #EDF3FF;
    --shadow-sm:     0 1px 2px 0 rgba(0,0,0,0.05);
    --shadow-md:     0 4px 6px -1px rgba(0,0,0,0.05), 0 2px 4px -1px rgba(0,0,0,0.03);
    --shadow-lg:     0 10px 15px -3px rgba(0,0,0,0.05), 0 4px 6px -2px rgba(0,0,0,0.02);
    --shadow-purple: 0 4px 14px 0 rgba(109, 40, 217, 0.15);
  }
}

/* Mirror for manual data-theme="dark" toggle */
[data-theme="dark"] .app-main,
[data-theme="dark"] .modal-container,
[data-theme="dark"] .search-modal {
  --bg-primary:    #FFFFFF;
  --bg-secondary:  #F7F5FC;
  --bg-tertiary:   #F1EDFF;
  --text-primary:  #16151E;
  --text-secondary:#686777;
  --text-muted:    #8B8B98;
  --border-color:  #E5E3EB;
  --border-light:  #E5E3EB;
  --primary-color: #6C4BFF;
  --primary-hover: #32158F;
  --primary-light: #EEEAFE;
  --swa-purple-100:#EEEAFE;
  --color-success-light:#E9F7F1;
  --color-warning-light:#FFF4DC;
  --color-danger-light: #FDECEF;
  --color-info-light:   #EDF3FF;
}