/* ═══════════════════════════════════════════════════════════════════════════
   T-MANAGER DESIGN TOKENS
   Premium SaaS Design System with Dark Mode Support
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
   /* ─────────────────────────────────────────────
     TYPOGRAPHY
  ───────────────────────────────────────────── */
   --tm-font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

   --tm-font-xs: 0.75rem;
   /* 12px */
   --tm-font-sm: 0.8125rem;
   /* 13px */
   --tm-font-base: 0.875rem;
   /* 14px */
   --tm-font-lg: 1rem;
   /* 16px */
   --tm-font-xl: 1.25rem;
   /* 20px */
   --tm-font-2xl: 1.5rem;
   /* 24px */
   --tm-font-3xl: 2rem;
   /* 32px */

   --tm-weight-normal: 400;
   --tm-weight-medium: 500;
   --tm-weight-semibold: 600;
   --tm-weight-bold: 700;

   /* ─────────────────────────────────────────────
     COLORS - LIGHT MODE (Default)
  ───────────────────────────────────────────── */
   /* Primary Brand - Indigo */
   --tm-primary-50: #EEF2FF;
   --tm-primary-100: #E0E7FF;
   --tm-primary-200: #C7D2FE;
   --tm-primary-500: #6366F1;
   --tm-primary-600: #4F46E5;
   --tm-primary-700: #4338CA;

   /* Neutral Grays */
   --tm-gray-25: #FCFCFD;
   --tm-gray-50: #F9FAFB;
   --tm-gray-100: #F3F4F6;
   --tm-gray-200: #E5E7EB;
   --tm-gray-300: #D1D5DB;
   --tm-gray-400: #9CA3AF;
   --tm-gray-500: #6B7280;
   --tm-gray-600: #4B5563;
   --tm-gray-700: #374151;
   --tm-gray-800: #1F2937;
   --tm-gray-900: #111827;
   --tm-gray-950: #0B0D10;

   /* Status Colors */
   --tm-success-50: rgba(34, 197, 94, 0.1);
   --tm-success-100: rgba(34, 197, 94, 0.15);
   --tm-success-400: #059669;
   --tm-success-500: #047857;
   --tm-success-600: #065F46;

   --tm-warning-50: #FFFBEB;
   --tm-warning-100: #FEF3C7;
   --tm-warning-400: #FBBF24;
   --tm-warning-500: #F59E0B;
   --tm-warning-600: #D97706;

   --tm-error-50: #FEF2F2;
   --tm-error-100: #FEE2E2;
   --tm-error-500: #EF4444;
   --tm-error-600: #DC2626;

   --tm-info-50: #EFF6FF;
   --tm-info-100: #DBEAFE;
   --tm-info-500: #3B82F6;
   --tm-info-600: #2563EB;

   /* ─────────────────────────────────────────────
     SEMANTIC TOKENS - LIGHT MODE
  ───────────────────────────────────────────── */
   /* Backgrounds */
   --tm-bg-app: var(--tm-gray-50);
   --tm-bg-surface: #FFFFFF;
   --tm-bg-surface-hover: var(--tm-gray-50);
   --tm-bg-surface-secondary: var(--tm-gray-100);
   --tm-bg-sidebar: var(--tm-gray-950);
   --tm-bg-topbar: #FFFFFF;

   /* Text */
   --tm-text-primary: var(--tm-gray-900);
   --tm-text-secondary: var(--tm-gray-600);
   --tm-text-tertiary: var(--tm-gray-500);
   --tm-text-muted: var(--tm-gray-400);
   --tm-text-inverted: #FFFFFF;
   --tm-text-sidebar: var(--tm-gray-400);
   --tm-text-sidebar-active: #FFFFFF;
   --tm-text-success: #059669;

   /* Borders */
   --tm-border-color: var(--tm-gray-200);
   --tm-border-color-subtle: var(--tm-gray-100);
   --tm-border-color-strong: var(--tm-gray-300);

   /* ─────────────────────────────────────────────
     LAYOUT
  ───────────────────────────────────────────── */
   --tm-sidebar-width: 260px;
   --tm-sidebar-width-collapsed: 72px;
   --tm-topbar-height: 64px;

   /* ─────────────────────────────────────────────
     SPACING
  ───────────────────────────────────────────── */
   --tm-space-1: 0.25rem;
   /* 4px */
   --tm-space-2: 0.5rem;
   /* 8px */
   --tm-space-3: 0.75rem;
   /* 12px */
   --tm-space-4: 1rem;
   /* 16px */
   --tm-space-5: 1.25rem;
   /* 20px */
   --tm-space-6: 1.5rem;
   /* 24px */
   --tm-space-8: 2rem;
   /* 32px */
   --tm-space-10: 2.5rem;
   /* 40px */
   --tm-space-12: 3rem;
   /* 48px */

   /* ─────────────────────────────────────────────
     BORDERS & RADIUS
  ───────────────────────────────────────────── */
   --tm-radius-sm: 4px;
   --tm-radius-md: 6px;
   --tm-radius-lg: 8px;
   --tm-radius-xl: 12px;
   --tm-radius-full: 9999px;

   /* ─────────────────────────────────────────────
     SHADOWS
  ───────────────────────────────────────────── */
   --tm-shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
   --tm-shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);
   --tm-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
   --tm-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
   --tm-shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);

   /* ─────────────────────────────────────────────
     TRANSITIONS
  ───────────────────────────────────────────── */
   --tm-transition-fast: 150ms ease;
   --tm-transition-base: 200ms ease;
   --tm-transition-slow: 300ms ease;
}

/* ═══════════════════════════════════════════════════════════════════════════
   DARK MODE
   ═══════════════════════════════════════════════════════════════════════════ */
[data-theme="dark"] {
   /* Backgrounds */
   --tm-bg-app: #0F1117;
   --tm-bg-surface: #1A1D24;
   --tm-bg-surface-hover: #22252E;
   --tm-bg-surface-secondary: #22252E;
   --tm-bg-sidebar: #0B0D10;
   --tm-bg-topbar: #1A1D24;
   --tm-bg-tertiary: #22252E;

   /* Text - Improved contrast for dark mode */
   --tm-text-primary: #F9FAFB;
   --tm-text-secondary: #D1D5DB;
   --tm-text-tertiary: #9CA3AF;
   --tm-text-muted: #6B7280;
   --tm-text-inverted: #111827;
   --tm-text-success: #4ADE80;

   /* Borders - More visible in dark mode */
   --tm-border-color: #3B4048;
   --tm-border-color-subtle: #2D3139;
   --tm-border-color-strong: #4B5563;

   /* Status Colors - Darker backgrounds for dark mode */
   --tm-primary-100: rgba(99, 102, 241, 0.15);
   --tm-primary-600: #6366F1;

   --tm-success-100: rgba(34, 197, 94, 0.15);
   --tm-success-600: #4ADE80;

   --tm-warning-100: rgba(251, 191, 36, 0.15);
   --tm-warning-600: #FBBF24;

   --tm-info-100: rgba(59, 130, 246, 0.15);
   --tm-info-600: #60A5FA;

   /* Shadows (darker for dark mode) */
   --tm-shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.3);
   --tm-shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.4), 0 1px 2px -1px rgba(0, 0, 0, 0.3);
   --tm-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.4), 0 2px 4px -2px rgba(0, 0, 0, 0.3);
   --tm-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.4), 0 4px 6px -4px rgba(0, 0, 0, 0.3);
}