/* ===========================================
   Design Tokens — Professional Dark-First
   =========================================== */

@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,300;0,14..32,400;0,14..32,500;0,14..32,600;0,14..32,700;0,14..32,800;1,14..32,400&display=swap');

/* =============================================
   ROOT — DARK THEME (DEFAULT)
   ============================================= */
:root {
  /* Typography */
  --font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: 'JetBrains Mono', 'Fira Code', ui-monospace, monospace;

  --text-xs:   0.6875rem;
  --text-sm:   0.8125rem;
  --text-base: 0.9375rem;
  --text-md:   1.0625rem;
  --text-lg:   1.25rem;
  --text-xl:   1.5rem;
  --text-2xl:  2rem;
  --text-3xl:  2.5rem;

  --weight-light:     300;
  --weight-normal:    400;
  --weight-medium:    500;
  --weight-semibold:  600;
  --weight-bold:      700;
  --weight-extrabold: 800;

  /* Spacing */
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.25rem;
  --space-6:  1.5rem;
  --space-8:  2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;

  /* Border Radius */
  --radius-sm:   5px;
  --radius-md:   8px;
  --radius-lg:   10px;
  --radius-xl:   14px;
  --radius-full: 9999px;

  /* Transitions */
  --transition-fast: 110ms ease;
  --transition-base: 190ms ease;
  --transition-slow: 340ms ease;
  --transition-bounce: 400ms cubic-bezier(0.34, 1.56, 0.64, 1);

  /* Z-index */
  --z-dropdown:       100;
  --z-modal-backdrop: 200;
  --z-modal:          300;
  --z-toast:          400;
  --z-topbar:         50;

  /* Layout */
  --sidebar-width: 232px;
  --topbar-h: 52px;

  /* ========================
     DARK MODE COLORS
     ======================== */

  /* Accent */
  --color-primary-50:  #EFF6FF;
  --color-primary-100: #DBEAFE;
  --color-primary-200: #BFDBFE;
  --color-primary-300: #93C5FD;
  --color-primary-400: #60A5FA;
  --color-primary-500: #3B82F6;
  --color-primary-600: #2563EB;
  --color-primary-700: #1D4ED8;
  --color-primary-800: #1E40AF;
  --color-primary-900: #1E3A8A;

  /* Accent teal */
  --color-accent-400: #34D399;
  --color-accent-500: #10B981;
  --color-accent-600: #059669;

  /* Success */
  --color-success-50:  #ECFDF5;
  --color-success-400: #34D399;
  --color-success-500: #10B981;
  --color-success-600: #059669;
  --color-success-700: #047857;

  /* Danger */
  --color-danger-50:  #FEF2F2;
  --color-danger-400: #F87171;
  --color-danger-500: #EF4444;
  --color-danger-600: #DC2626;
  --color-danger-700: #B91C1C;

  /* Warning */
  --color-warning-50:  #FFFBEB;
  --color-warning-500: #F59E0B;
  --color-warning-600: #D97706;

  /* Neutrals */
  --color-white: #FFFFFF;
  --color-black: #000000;

  /* Backgrounds */
  --bg-app:             #080C14;
  --bg-surface:         rgba(17, 24, 39, 0.75);
  --bg-surface-solid:   #111827;
  --bg-surface-raised:  #1A2238;
  --bg-surface-sunken:  #070A10;
  --bg-surface-hover:   rgba(36, 48, 70, 0.7);
  --bg-surface-active:  #243046;
  --bg-overlay:         rgba(0, 0, 0, 0.65);
  --bg-preview:         #0C1018;

  /* Text */
  --text-primary:   #F1F5F9;
  --text-secondary: #8B9BB4;
  --text-tertiary:  #4A5568;
  --text-inverse:   #FFFFFF;
  --text-link:      var(--color-primary-400);

  /* Borders */
  --border-default: rgba(255, 255, 255, 0.065);
  --border-strong:  rgba(255, 255, 255, 0.12);
  --border-focus:   var(--color-primary-500);

  /* Shadows */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.5);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.5);
  --shadow-lg: 0 10px 30px rgba(0, 0, 0, 0.6);
  --shadow-xl: 0 20px 50px rgba(0, 0, 0, 0.7);
  --shadow-glow: 0 0 20px rgba(59, 130, 246, 0.25);

  /* Inputs */
  --input-bg:          #1A2238;
  --input-border:      rgba(255, 255, 255, 0.1);
  --input-text:        var(--text-primary);
  --input-placeholder: var(--text-tertiary);

  /* Sidebar */
  --sidebar-bg:        #0D1321;
  --sidebar-border:    rgba(255, 255, 255, 0.055);
  --sidebar-header-bg: #0D1321;

  /* Topbar */
  --topbar-bg:     rgba(8, 12, 20, 0.92);
  --topbar-border: rgba(255, 255, 255, 0.065);
  --topbar-shadow: 0 1px 0 rgba(255, 255, 255, 0.04);
}

/* =============================================
   LIGHT THEME OVERRIDES
   ============================================= */
[data-theme="light"] {
  --bg-app:             #F0F4F9;
  --bg-surface:         rgba(255, 255, 255, 0.8);
  --bg-surface-solid:   #FFFFFF;
  --bg-surface-raised:  #FFFFFF;
  --bg-surface-sunken:  #F1F5F9;
  --bg-surface-hover:   #F8FAFC;
  --bg-surface-active:  #EEF2FF;
  --bg-overlay:         rgba(0, 0, 0, 0.4);
  --bg-preview:         #E8EDF5;

  --text-primary:   #0F172A;
  --text-secondary: #4B5563;
  --text-tertiary:  #9CA3AF;
  --text-inverse:   #FFFFFF;
  --text-link:      var(--color-primary-600);

  --border-default: rgba(0, 0, 0, 0.07);
  --border-strong:  rgba(0, 0, 0, 0.13);
  --border-focus:   var(--color-primary-500);

  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.06);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);
  --shadow-lg: 0 10px 30px rgba(0, 0, 0, 0.10);
  --shadow-xl: 0 20px 50px rgba(0, 0, 0, 0.12);
  --shadow-glow: 0 0 20px rgba(37, 99, 235, 0.15);

  --input-bg:     #FFFFFF;
  --input-border: rgba(0, 0, 0, 0.14);

  --sidebar-bg:        #FFFFFF;
  --sidebar-border:    rgba(0, 0, 0, 0.07);
  --sidebar-header-bg: #FFFFFF;

  --topbar-bg:     rgba(255, 255, 255, 0.92);
  --topbar-border: rgba(0, 0, 0, 0.07);
  --topbar-shadow: 0 1px 0 rgba(0, 0, 0, 0.06);
}