/**
 * Design Tokens - CSS Custom Properties
 * Single source of truth for all design values
 * Used by components.css and utilities.css
 */

:root {
  /* ===========================
     COLOR PALETTE
     =========================== */
  
  /* Primary Colors */
  --color-primary: #007bff;
  --color-primary-hover: #0056b3;
  --color-primary-light: rgba(0, 123, 255, 0.1);
  
  /* Secondary Colors */
  --color-secondary: #6c757d;
  --color-secondary-hover: #545b62;
  
  /* Success/Error/Warning/Info */
  --color-success: #28a745;
  --color-success-hover: #1e7e34;
  --color-success-light: rgba(40, 167, 69, 0.1);
  
  --color-error: #dc3545;
  --color-error-hover: #bd2130;
  --color-error-light: rgba(220, 53, 69, 0.1);
  
  --color-warning: #ffc107;
  --color-warning-hover: #d39e00;
  --color-warning-light: rgba(255, 193, 7, 0.1);
  
  --color-info: #17a2b8;
  --color-info-hover: #117a8b;
  --color-info-light: rgba(23, 162, 184, 0.1);
  
  /* Neutral/Grayscale */
  --color-white: #ffffff;
  --color-gray-100: #f8f9fa;
  --color-gray-200: #e9ecef;
  --color-gray-300: #dee2e6;
  --color-gray-400: #ced4da;
  --color-gray-500: #adb5bd;
  --color-gray-600: #6c757d;
  --color-gray-700: #495057;
  --color-gray-800: #343a40;
  --color-gray-900: #212529;
  --color-black: #000000;
  
  /* Background Colors */
  --bg-primary: #ffffff;
  --bg-secondary: #f8f9fa;
  --bg-dark: #2c3e50;
  --bg-darker: #1a252f;
  --bg-overlay: rgba(0, 0, 0, 0.5);
  
  /* Text Colors */
  --text-primary: #212529;
  --text-secondary: #6c757d;
  --text-muted: #adb5bd;
  --text-light: #e0e0e0;
  --text-white: #ffffff;
  --text-inverse: #ffffff;
  
  /* Border Colors */
  --border-color: #dee2e6;
  --border-color-dark: #495057;
  --border-color-light: #e9ecef;
  
  /* ===========================
     SPACING SYSTEM (8px base)
     =========================== */
  --spacing-xs: 4px;    /* 0.5 × base */
  --spacing-sm: 8px;    /* 1 × base */
  --spacing-md: 16px;   /* 2 × base */
  --spacing-lg: 24px;   /* 3 × base */
  --spacing-xl: 32px;   /* 4 × base */
  --spacing-2xl: 48px;  /* 6 × base */
  --spacing-3xl: 64px;  /* 8 × base */
  
  /* ===========================
     TYPOGRAPHY
     =========================== */
  --font-family-base: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-family-mono: "SF Mono", Monaco, "Cascadia Code", "Roboto Mono", Consolas, "Courier New", monospace;
  
  --font-size-xs: 12px;
  --font-size-sm: 14px;
  --font-size-base: 16px;
  --font-size-lg: 18px;
  --font-size-xl: 20px;
  --font-size-2xl: 24px;
  --font-size-3xl: 32px;
  
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  
  --line-height-tight: 1.2;
  --line-height-base: 1.5;
  --line-height-relaxed: 1.75;
  
  /* ===========================
     BORDERS & RADIUS
     =========================== */
  --border-width: 1px;
  --border-width-thick: 2px;
  
  --border-radius-sm: 4px;
  --border-radius-md: 6px;
  --border-radius-lg: 8px;
  --border-radius-xl: 12px;
  --border-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.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
  --shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
  
  /* ===========================
     Z-INDEX LAYERS
     =========================== */
  --z-dropdown: 1000;
  --z-sticky: 1020;
  --z-fixed: 1030;
  --z-modal-backdrop: 1040;
  --z-modal: 1050;
  --z-tooltip: 1070;
  
  /* ===========================
     TRANSITIONS
     =========================== */
  --transition-fast: 150ms ease-in-out;
  --transition-base: 250ms ease-in-out;
  --transition-slow: 350ms ease-in-out;
  
  /* ===========================
     COMPONENT-SPECIFIC
     =========================== */
  
  /* Buttons */
  --btn-padding-y: 8px;
  --btn-padding-x: 16px;
  --btn-padding-y-sm: 4px;
  --btn-padding-x-sm: 12px;
  --btn-padding-y-lg: 12px;
  --btn-padding-x-lg: 24px;
  
  /* Forms */
  --input-height: 38px;
  --input-padding-y: 8px;
  --input-padding-x: 12px;
  --input-bg: #ffffff;
  --input-border-color: #dee2e6;
  --input-border-color-focus: #007bff;
  --input-placeholder-color: #adb5bd;
  
  /* Grid */
  --grid-gap: 16px;
  --grid-header-bg: #f8f9fa;
  --grid-row-hover-bg: #f1f3f5;
  --grid-border-color: #dee2e6;
  
  /* Modal */
  --modal-backdrop-bg: rgba(0, 0, 0, 0.5);
  --modal-bg: #ffffff;
  --modal-header-bg: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  --modal-max-width-sm: 400px;
  --modal-max-width-md: 600px;
  --modal-max-width-lg: 800px;
  --modal-max-width-xl: 1200px;
  
  /* Tabs */
  --tab-bg: #f8f9fa;
  --tab-bg-active: #ffffff;
  --tab-border-color: #dee2e6;
  --tab-text-color: #6c757d;
  --tab-text-color-active: #007bff;
  
  /* Badge */
  --badge-padding-y: 4px;
  --badge-padding-x: 8px;
  --badge-font-size: 12px;
  
  /* Status Colors */
  --status-active: #28a745;
  --status-inactive: #dc3545;
  --status-pending: #ffc107;
  --status-processing: #17a2b8;
}