/**
 * Design Tokens - Core System
 * Single source of truth for all UI styling - Base Primitives Only
 *
 * Philosophy: Components reference primitives directly (e.g., var(--color-background))
 * No redundant component-specific aliases unless there's a real difference.
 *
 * Organization:
 * 1. Colors
 * 2. Spacing
 * 3. Typography
 * 4. Border Radius
 * 5. Transitions
 * 6. Shadows & Effects
 * 7. Z-Index
 *
 * Usage in components:
 *   background: var(--color-background);
 *   box-shadow: var(--shadow-border);
 *   padding: 10px var(--spacing-md);
 */

:root {
  /* ==================== COLORS ==================== */

  /* ---------- Primary Colors ---------- */
  --color-primary: #4a9eff;
  --color-primary-dark: #3b8fe8;
  --color-primary-hover: #3b8fe8;
  --color-primary-rgb: 74, 158, 255;

  /* ---------- Semantic Colors ---------- */

  /* Danger (Red) */
  --color-danger: #f44336;
  --color-danger-hover: #d32f2f;
  --color-danger-light: #feb2b2;  /* Light red for borders */
  --color-danger-rgb: 244, 67, 54;

  /* Success (Green) */
  --color-success: #4caf50;
  --color-success-hover: #388e3c;
  --color-success-light: #9ae6b4;  /* Light green for borders */
  --color-success-rgb: 76, 175, 80;

  /* Warning (Orange) */
  --color-warning: #ff9800;
  --color-warning-hover: #f57c00;
  --color-warning-light: #fbd38d;  /* Light orange for borders */
  --color-warning-rgb: 255, 152, 0;

  /* Info (Blue) */
  --color-info: #0969da;
  --color-info-hover: #0860ca;
  --color-info-light: #90cdf4;  /* Light blue for borders */
  --color-info-rgb: 9, 105, 218;

  /* Purple */
  --color-purple: #8b5cf6;
  --color-purple-hover: #7c3aed;
  --color-purple-light: #ddd6fe;  /* Light purple for borders */
  --color-purple-rgb: 139, 92, 246;

  /* ---------- Neutral Colors ---------- */

  /* Backgrounds */
  --color-background-page: linear-gradient(135deg, #e5faff 0%, #e1f4ff 100%); /* Page/body background gradient */
  --color-background: #ffffff;                     /* Component backgrounds (cards, modals, inputs, etc.) */
  --color-background-secondary: #f6f8fa;           /* Light grey - used in secondary buttons, form backgrounds */
  --color-background-tertiary: #e8eaed;            /* Darker grey - used in toggle OFF state, dropdown search hover */
  --color-background-hover: #f6f8fa;               /* Hover state for primary backgrounds */
  --color-background-tertiary-hover: #d5d8dc;      /* Hover state for tertiary backgrounds */

  /* Borders */
  --color-border: #d1d5da;
  --color-border-hover: #959da5;
  --color-border-light: #e1e4e8;

  /* Text */
  --color-text: #24292e;
  --color-text-secondary: #586069;
  --color-text-tertiary: #6a737d;
  --color-text-disabled: #959da5;
  --color-text-placeholder: #999999;

  /* ==================== SPACING ==================== */

  /* Base spacing scale */
  --spacing-xs: 4px;
  --spacing-sm: 8px;
  --spacing-md: 12px;
  --spacing-lg: 16px;
  --spacing-xl: 24px;
  --spacing-2xl: 32px;
  --spacing-3xl: 48px;

  /* Semantic spacing tokens */
  --spacing-component-label: 8px;        /* Space between form controls (checkbox, radio, toggle) and their labels */
  --spacing-component-gap: 16px;         /* Horizontal space between multiple form controls in a row */
  --spacing-component-gap-vertical: 8px; /* Vertical space between form controls when they wrap */

  /* ==================== TYPOGRAPHY ==================== */

  --font-family-base: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Helvetica', 'Arial', sans-serif;
  --font-family-mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace;

  --font-size-xs: 11px;
  --font-size-sm: 12px;
  --font-size-md: 14px;
  --font-size-lg: 16px;
  --font-size-xl: 20px;
  --font-size-2xl: 24px;

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

  --line-height-tight: 1.25;
  --line-height-normal: 1.5;
  --line-height-relaxed: 1.75;

  /* ==================== BORDER RADIUS ==================== */

  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 8px;
  --radius-xl: 12px;
  --radius-2xl: 16px;
  --radius-pill: 20px;
  --radius-circle: 50%;

  /* ==================== TRANSITIONS ==================== */

  --transition-fast: 150ms ease;
  --transition-normal: 200ms ease;
  --transition-slow: 300ms ease;

  /* ==================== SHADOWS & EFFECTS ==================== */

  /* Elevation Shadows */
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.08);
  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1), 0 2px 4px rgba(0, 0, 0, 0.06);
  --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1), 0 4px 6px rgba(0, 0, 0, 0.05);
  --shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.1), 0 10px 10px rgba(0, 0, 0, 0.04);

  /* Border Shadows (for inputs/buttons using box-shadow for clean state transitions) */
  --shadow-border: inset 0 0 0 1px var(--color-border);
  --shadow-border-hover: inset 0 0 0 1px var(--color-border-hover);

  /* Focus/Validation State Shadows */
  --shadow-focus: inset 0 0 0 1px var(--color-primary), 0 0 0 3px rgba(var(--color-primary-rgb), 0.2);
  --shadow-invalid: inset 0 0 0 1px var(--color-danger);
  --shadow-invalid-focus: inset 0 0 0 1px var(--color-danger), 0 0 0 3px rgba(var(--color-danger-rgb), 0.2);
  --shadow-valid: inset 0 0 0 1px var(--color-success);
  --shadow-valid-focus: inset 0 0 0 1px var(--color-success), 0 0 0 3px rgba(var(--color-success-rgb), 0.2);

  /* Button Focus Shadows (inset border + outer glow to match text inputs) */
  --shadow-focus-button: inset 0 0 0 1px var(--color-primary), 0 0 0 3px rgba(var(--color-primary-rgb), 0.3);
  --shadow-focus-button-success: inset 0 0 0 1px var(--color-success), 0 0 0 3px rgba(var(--color-success-rgb), 0.3);
  --shadow-focus-button-danger: inset 0 0 0 1px var(--color-danger), 0 0 0 3px rgba(var(--color-danger-rgb), 0.3);
  --shadow-focus-button-warning: inset 0 0 0 1px var(--color-warning), 0 0 0 3px rgba(var(--color-warning-rgb), 0.3);
  --shadow-focus-button-info: inset 0 0 0 1px var(--color-info), 0 0 0 3px rgba(var(--color-info-rgb), 0.3);
  --shadow-focus-button-purple: inset 0 0 0 1px var(--color-purple), 0 0 0 3px rgba(var(--color-purple-rgb), 0.3);

  /* ==================== Z-INDEX ==================== */

  --z-index-dropdown: 1000;
  --z-index-sticky: 1020;
  --z-index-fixed: 1030;
  --z-index-modal-backdrop: 1040;
  --z-index-modal: 1050;
  --z-index-popover: 1060;
  --z-index-tooltip: 1070;
  --z-index-toast: 1080;

  /* ==================== COMPONENT-SPECIFIC ==================== */

  /* Detail Header */
  --detail-header-color: var(--color-white);
  --detail-header-padding: 28px;
}

/* ==================== GLOBAL DEFAULTS ==================== */

body {
  font-family: var(--font-family-base);
  font-size: var(--font-size-md);
  line-height: var(--line-height-normal);
  color: var(--color-text);
  background: var(--color-background-page);
  background-attachment: fixed;
}