/* ========================================
   00-tokens.css — Design System Tokens
   Dark Professional Design System
   ======================================== */

/* ========================================
   DARK THEME (Default)
   ======================================== */
:root {
  /* BACKGROUNDS (3 levels of depth) */
  --bg-base:       #0B0F19;
  --bg-surface:    #111827;
  --bg-raised:     #1F2937;
  --bg-hover:      #374151;
  --bg-active:     #4B5563;

  /* TEXT (3 levels of hierarchy) */
  --text-primary:    #F9FAFB;
  --text-secondary:  #9CA3AF;
  --text-muted:      #6B7280;
  --text-inverse:    #111827;

  /* BORDERS */
  --border-default:  #1F2937;
  --border-subtle:   #374151;

  /* ACCENT (Indigo) */
  --accent:          #818CF8;
  --accent-hover:    #A5B4FC;
  --accent-subtle:   rgba(129, 140, 248, 0.15);
  --accent-ring:     rgba(129, 140, 248, 0.40);

  /* SEMANTIC */
  --success:         #22C55E;
  --success-subtle:  rgba(34, 197, 94, 0.15);
  --success-text:    #4ADE80;
  --warning:         #EAB308;
  --warning-subtle:  rgba(234, 179, 8, 0.15);
  --warning-text:    #FACC15;
  --danger:          #EF4444;
  --danger-subtle:   rgba(239, 68, 68, 0.15);
  --danger-text:     #F87171;
  --info:            #06B6D4;
  --info-subtle:     rgba(6, 182, 212, 0.15);
  --info-text:       #22D3EE;

  /* PIPELINE STEP CATEGORIES */
  --cat-source:        #22D3EE;
  --cat-source-bg:     rgba(34, 211, 238, 0.12);
  --cat-process:       #FACC15;
  --cat-process-bg:    rgba(250, 204, 21, 0.12);
  --cat-destination:   #4ADE80;
  --cat-destination-bg: rgba(74, 222, 128, 0.12);
  --cat-special:       #F87171;
  --cat-special-bg:    rgba(248, 113, 113, 0.12);
  --cat-utility:       #9CA3AF;
  --cat-utility-bg:    rgba(156, 163, 175, 0.12);

  /* FLOW TYPE COLORS */
  --flow-import: #60A5FA;       --flow-import-bg: rgba(96, 165, 250, 0.15);
  --flow-export: #4ADE80;       --flow-export-bg: rgba(74, 222, 128, 0.15);
  --flow-sync: #2DD4BF;         --flow-sync-bg: rgba(45, 212, 191, 0.15);
  --flow-transform: #FBBF24;    --flow-transform-bg: rgba(251, 191, 36, 0.15);
  --flow-notification: #E879F9; --flow-notification-bg: rgba(232, 121, 249, 0.15);
  --flow-backup: #94A3B8;       --flow-backup-bg: rgba(148, 163, 184, 0.15);
  --flow-orchestration: #A78BFA; --flow-orchestration-bg: rgba(167, 139, 250, 0.15);
  --flow-maintenance: #F59E0B;   --flow-maintenance-bg: rgba(245, 158, 11, 0.15);

  /* GLASSMORPHISM */
  --glass-bg:        rgba(17, 24, 39, 0.80);
  --glass-border:    rgba(255, 255, 255, 0.08);
  --glass-blur:      12px;

  /* SHADOWS (dark: glow instead of black-on-black) */
  --shadow-sm:       0 1px 3px rgba(0,0,0,0.4);
  --shadow-md:       0 6px 12px rgba(0,0,0,0.5);
  --shadow-lg:       0 12px 24px rgba(0,0,0,0.5);
  --shadow-accent:   0 0 0 1px var(--accent), 0 0 20px rgba(129,140,248,0.15);
  --shadow-accent-sm: 0 0 12px rgba(129,140,248,0.20);
  --shadow-card:     0 0 0 1px var(--border-default), 0 4px 6px rgba(0,0,0,0.4);
  --shadow-dropdown: 0 0 0 1px var(--border-subtle), 0 8px 16px rgba(0,0,0,0.5);
  --shadow-modal:    0 0 0 1px var(--glass-border), 0 16px 32px rgba(0,0,0,0.6);

  /* OPACITY */
  --opacity-disabled: 0.5;
  --opacity-muted:    0.7;
  --opacity-subtle:   0.85;

  /* TOOLTIP */
  --tooltip-bg: #1a1d2e;
  --tooltip-text: #e2e8f0;
  --tooltip-border: rgba(255, 255, 255, 0.15);

  /* ========================================
     TYPOGRAPHY
     ======================================== */
  --font-sans:   'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono:   'JetBrains Mono', 'Fira Code', 'Cascadia Code', monospace;

  /* Scale */
  --text-xs:    0.6875rem;    /* 11px */
  --text-sm:    0.8125rem;    /* 13px */
  --text-base:  0.875rem;     /* 14px */
  --text-md:    0.9375rem;    /* 15px */
  --text-lg:    1rem;         /* 16px */
  --text-xl:    1.125rem;     /* 18px */
  --text-2xl:   1.25rem;      /* 20px */
  --text-3xl:   1.5rem;       /* 24px */

  /* Line heights */
  --leading-tight: 1.25;
  --leading-normal: 1.4;
  --leading-relaxed: 1.6;

  /* Weights */
  --font-normal: 400;
  --font-medium: 500;
  --font-semibold: 600;
  --font-bold: 700;

  /* Letter spacing */
  --tracking-tight: -0.01em;
  --tracking-wide:   0.025em;
  --tracking-wider:  0.05em;

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

  /* ========================================
     BORDER RADIUS
     ======================================== */
  --radius-sm: 4px;
  --radius: 6px;
  --radius-md: 8px;
  --radius-lg: 10px;
  --radius-xl: 12px;
  --radius-2xl: 16px;
  --radius-full: 9999px;

  /* ========================================
     TRANSITIONS
     ======================================== */
  --duration-fast: 100ms;
  --duration-base: 150ms;
  --duration-moderate: 250ms;
  --duration-slow: 350ms;
  --ease-default: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-spring: cubic-bezier(0.22, 1, 0.36, 1);

  /* ========================================
     COMPONENT SIZES
     ======================================== */

  /* Buttons */
  --btn-padding-y-sm: 0.25rem;
  --btn-padding-x-sm: 0.625rem;
  --btn-font-size-sm: var(--text-sm);
  --btn-height-sm: 28px;
  --btn-padding-y: 0.375rem;
  --btn-padding-x: 0.875rem;
  --btn-font-size: var(--text-base);
  --btn-height: 34px;
  --btn-padding-y-lg: 0.5rem;
  --btn-padding-x-lg: 1.25rem;
  --btn-font-size-lg: var(--text-md);
  --btn-height-lg: 42px;

  /* Input fields */
  --input-padding-y-sm: 0.25rem;
  --input-padding-x-sm: 0.625rem;
  --input-font-size-sm: var(--text-sm);
  --input-height-sm: 30px;
  --input-padding-y: 0.375rem;
  --input-padding-x: 0.75rem;
  --input-font-size: var(--text-base);
  --input-height: 36px;
  --input-padding-y-lg: 0.5rem;
  --input-padding-x-lg: 1rem;
  --input-font-size-lg: var(--text-md);
  --input-height-lg: 44px;

  /* Tables */
  --table-cell-padding-y: 0.5rem;
  --table-cell-padding-x: 0.75rem;
  --table-font-size: var(--text-sm);
  --table-header-font-size: var(--text-xs);
  --table-row-height: 40px;

  /* Cards */
  --card-padding: var(--space-4);
  --card-header-padding: var(--space-3) var(--space-4);
  --card-border-radius: var(--radius-lg);

  /* Modals */
  --modal-header-padding: var(--space-3) var(--space-4);
  --modal-body-padding: var(--space-4);
  --modal-footer-padding: var(--space-3) var(--space-4);

  /* Badges */
  --badge-padding-y: 0.25rem;
  --badge-padding-x: 0.5rem;
  --badge-font-size: var(--text-xs);

  /* Layout */
  --sidebar-width: 220px;
  --sidebar-collapsed-width: 60px;
  --top-bar-height: 50px;

  /* Z-Index */
  --z-dropdown: 1000;
  --z-sticky: 1020;
  --z-fixed: 1030;
  --z-modal-backdrop: 1040;
  --z-modal: 1050;
  --z-popover: 1060;
  --z-tooltip: 1070;

  /* ========================================
     BOOTSTRAP 5.3 VARIABLE OVERRIDES
     ======================================== */
  --bs-body-bg: var(--bg-base);
  --bs-body-color: var(--text-primary);
  --bs-body-font-family: var(--font-sans);
  --bs-body-font-size: var(--text-base);
  --bs-primary: var(--accent);
  --bs-primary-rgb: 99, 102, 241;
  --bs-secondary: var(--text-muted);
  --bs-secondary-rgb: 107, 114, 128;
  --bs-success: var(--success);
  --bs-success-rgb: 34, 197, 94;
  --bs-danger: var(--danger);
  --bs-danger-rgb: 239, 68, 68;
  --bs-warning: var(--warning);
  --bs-warning-rgb: 234, 179, 8;
  --bs-info: var(--info);
  --bs-info-rgb: 6, 182, 212;
  --bs-light: var(--bg-raised);
  --bs-light-rgb: 31, 41, 55;
  --bs-dark: var(--bg-surface);
  --bs-dark-rgb: 17, 24, 39;
  --bs-border-color: var(--border-default);
  --bs-border-color-translucent: var(--border-subtle);
  --bs-link-color: var(--accent);
  --bs-link-color-rgb: 99, 102, 241;
  --bs-link-hover-color: var(--accent-hover);
  --bs-link-hover-color-rgb: 129, 140, 248;
  --bs-secondary-color: var(--text-secondary);
  --bs-tertiary-color: var(--text-muted);
  --bs-secondary-bg: var(--bg-raised);
  --bs-tertiary-bg: var(--bg-hover);
  --bs-emphasis-color: var(--text-primary);
  --bs-card-bg: var(--bg-surface);
  --bs-card-border-color: var(--border-default);
}

/* ========================================
   LIGHT THEME
   ======================================== */
[data-theme="light"] {
  --bg-base:       #F9FAFB;
  --bg-surface:    #FFFFFF;
  --bg-raised:     #F3F4F6;
  --bg-hover:      #E5E7EB;
  --bg-active:     #D1D5DB;

  --text-primary:    #111827;
  --text-secondary:  #4B5563;
  --text-muted:      #9CA3AF;
  --text-inverse:    #FFFFFF;

  --border-default:  #E5E7EB;
  --border-subtle:   #D1D5DB;

  --accent:          #6366F1;
  --accent-hover:    #4F46E5;
  --accent-subtle:   rgba(99, 102, 241, 0.10);
  --accent-ring:     rgba(99, 102, 241, 0.30);

  --success: #16A34A; --success-subtle: rgba(22,163,74,0.10); --success-text: #15803D;
  --warning: #CA8A04; --warning-subtle: rgba(202,138,4,0.10); --warning-text: #A16207;
  --danger:  #DC2626; --danger-subtle: rgba(220,38,38,0.10); --danger-text: #B91C1C;
  --info:    #0891B2; --info-subtle: rgba(8,145,178,0.10); --info-text: #0E7490;

  --cat-source: #0891B2; --cat-source-bg: rgba(8,145,178,0.10);
  --cat-process: #CA8A04; --cat-process-bg: rgba(202,138,4,0.10);
  --cat-destination: #16A34A; --cat-destination-bg: rgba(22,163,74,0.10);
  --cat-special: #DC2626; --cat-special-bg: rgba(220,38,38,0.10);
  --cat-utility: #6B7280; --cat-utility-bg: rgba(107,114,128,0.10);

  --flow-import: #2563EB;       --flow-import-bg: rgba(37, 99, 235, 0.12);
  --flow-export: #16A34A;       --flow-export-bg: rgba(22, 163, 74, 0.12);
  --flow-sync: #0D9488;         --flow-sync-bg: rgba(13, 148, 136, 0.12);
  --flow-transform: #D97706;    --flow-transform-bg: rgba(217, 119, 6, 0.12);
  --flow-notification: #C026D3; --flow-notification-bg: rgba(192, 38, 211, 0.12);
  --flow-backup: #64748B;       --flow-backup-bg: rgba(100, 116, 139, 0.12);
  --flow-orchestration: #7C3AED; --flow-orchestration-bg: rgba(124, 58, 237, 0.12);
  --flow-maintenance: #D97706;   --flow-maintenance-bg: rgba(217, 119, 6, 0.12);

  --glass-bg: rgba(255,255,255,0.80);
  --glass-border: rgba(0,0,0,0.06);

  --shadow-sm: 0 1px 3px rgba(0,0,0,0.06);
  --shadow-md: 0 4px 6px rgba(0,0,0,0.07);
  --shadow-lg: 0 12px 24px rgba(0,0,0,0.10);
  --shadow-accent: 0 0 0 1px var(--accent), 0 0 16px rgba(99,102,241,0.10);
  --shadow-accent-sm: 0 0 8px rgba(99,102,241,0.12);
  --shadow-card: 0 1px 3px rgba(0,0,0,0.08);
  --shadow-dropdown: 0 4px 12px rgba(0,0,0,0.12);
  --shadow-modal: 0 16px 32px rgba(0,0,0,0.15);

  --tooltip-bg: #ffffff;
  --tooltip-text: #1e293b;
  --tooltip-border: rgba(0, 0, 0, 0.12);

  --bs-body-bg: var(--bg-base);
  --bs-body-color: var(--text-primary);
  --bs-border-color: var(--border-default);
  --bs-border-color-translucent: var(--border-subtle);
  --bs-secondary-color: var(--text-secondary);
  --bs-tertiary-color: var(--text-muted);
  --bs-secondary-bg: var(--bg-raised);
  --bs-tertiary-bg: var(--bg-hover);
  --bs-emphasis-color: var(--text-primary);
  --bs-light: var(--bg-raised);
  --bs-light-rgb: 243, 244, 246;
  --bs-dark: var(--text-primary);
  --bs-dark-rgb: 17, 24, 39;
  --bs-card-bg: var(--bg-surface);
  --bs-card-border-color: var(--border-default);
}