/**
 * EasyStream Design System
 * Comprehensive design tokens and variables for consistent UI/UX
 * Version: 2.0
 */

:root {
  /* ==================== SPACING SYSTEM ==================== */
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;
  --space-2xl: 48px;
  --space-3xl: 64px;

  /* ==================== TYPOGRAPHY ==================== */
  --font-family-primary: -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: 0.75rem;    /* 12px */
  --font-size-sm: 0.875rem;   /* 14px */
  --font-size-md: 1rem;       /* 16px */
  --font-size-lg: 1.125rem;   /* 18px */
  --font-size-xl: 1.25rem;    /* 20px */
  --font-size-2xl: 1.5rem;    /* 24px */
  --font-size-3xl: 1.875rem;  /* 30px */
  --font-size-4xl: 2.25rem;   /* 36px */

  --font-weight-light: 300;
  --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;

  /* ==================== COLORS - NEUTRAL ==================== */
  --color-white: #ffffff;
  --color-black: #000000;

  --color-gray-50: #f9fafb;
  --color-gray-100: #f3f4f6;
  --color-gray-200: #e5e7eb;
  --color-gray-300: #d1d5db;
  --color-gray-400: #9ca3af;
  --color-gray-500: #6b7280;
  --color-gray-600: #4b5563;
  --color-gray-700: #374151;
  --color-gray-800: #1f2937;
  --color-gray-900: #111827;

  /* ==================== SEMANTIC COLORS - LIGHT THEME ==================== */
  --color-bg-primary: var(--color-white);
  --color-bg-secondary: var(--color-gray-50);
  --color-bg-tertiary: var(--color-gray-100);
  --color-bg-elevated: var(--color-white);
  --color-bg-overlay: rgba(0, 0, 0, 0.5);

  --color-text-primary: var(--color-gray-900);
  --color-text-secondary: var(--color-gray-600);
  --color-text-tertiary: var(--color-gray-500);
  --color-text-inverse: var(--color-white);
  --color-text-disabled: var(--color-gray-400);

  --color-border-primary: var(--color-gray-300);
  --color-border-secondary: var(--color-gray-200);
  --color-border-focus: var(--primary-color);

  /* ==================== STATUS COLORS ==================== */
  --color-success-bg: #d1fae5;
  --color-success-text: #065f46;
  --color-success-border: #34d399;
  --color-success: #10b981;

  --color-warning-bg: #fef3c7;
  --color-warning-text: #92400e;
  --color-warning-border: #fbbf24;
  --color-warning: #f59e0b;

  --color-error-bg: #fee2e2;
  --color-error-text: #991b1b;
  --color-error-border: #f87171;
  --color-error: #ef4444;

  --color-info-bg: #dbeafe;
  --color-info-text: #1e40af;
  --color-info-border: #60a5fa;
  --color-info: #3b82f6;

  /* ==================== BORDERS & RADIUS ==================== */
  --border-width-thin: 1px;
  --border-width-medium: 2px;
  --border-width-thick: 4px;

  --border-radius-none: 0;
  --border-radius-sm: 4px;
  --border-radius-md: 8px;
  --border-radius-lg: 12px;
  --border-radius-xl: 16px;
  --border-radius-2xl: 24px;
  --border-radius-full: 9999px;

  /* ==================== SHADOWS ==================== */
  --shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
  --shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
  --shadow-focus: 0 0 0 3px rgba(6, 162, 203, 0.5);

  /* ==================== 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-notification: 1080;

  /* ==================== TRANSITIONS ==================== */
  --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-base: 200ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: 300ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slowest: 500ms cubic-bezier(0.4, 0, 0.2, 1);

  --ease-in: cubic-bezier(0.4, 0, 1, 1);
  --ease-out: cubic-bezier(0, 0, 0.2, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);

  /* ==================== BREAKPOINTS (for reference in media queries) ==================== */
  /* Mobile: 0-639px */
  /* Tablet: 640-1023px */
  /* Desktop: 1024-1279px */
  /* Large Desktop: 1280px+ */

  /* ==================== ACCESSIBILITY ==================== */
  --focus-ring-width: 3px;
  --focus-ring-offset: 2px;
  --focus-ring-color: var(--color-border-focus);

  --touch-target-min: 44px; /* Minimum touch target size for mobile */

  /* ==================== ANIMATIONS ==================== */
  --animation-duration-fast: 150ms;
  --animation-duration-normal: 300ms;
  --animation-duration-slow: 500ms;
}

/* ==================== DARK THEME OVERRIDES ==================== */
[data-theme*="dark"] {
  --color-bg-primary: #121212;
  --color-bg-secondary: #1c1c1c;
  --color-bg-tertiary: #272727;
  --color-bg-elevated: #1f1f1f;
  --color-bg-overlay: rgba(0, 0, 0, 0.75);

  --color-text-primary: #f0f0f0;
  --color-text-secondary: #d0d0d0;
  --color-text-tertiary: #aaa;
  --color-text-inverse: #000;
  --color-text-disabled: #666;

  --color-border-primary: #2e2e2e;
  --color-border-secondary: #232323;

  --shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.3);
  --shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.4), 0 1px 2px -1px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.5), 0 2px 4px -2px rgba(0, 0, 0, 0.5);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.6), 0 4px 6px -4px rgba(0, 0, 0, 0.6);
  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.7), 0 8px 10px -6px rgba(0, 0, 0, 0.7);
  --shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.8);

  --color-success-bg: #064e3b;
  --color-success-text: #6ee7b7;
  --color-warning-bg: #78350f;
  --color-warning-text: #fcd34d;
  --color-error-bg: #7f1d1d;
  --color-error-text: #fca5a5;
  --color-info-bg: #1e3a8a;
  --color-info-text: #93c5fd;
}

/* ==================== UTILITY CLASSES ==================== */

/* Spacing utilities */
.m-0 { margin: 0; }
.m-xs { margin: var(--space-xs); }
.m-sm { margin: var(--space-sm); }
.m-md { margin: var(--space-md); }
.m-lg { margin: var(--space-lg); }
.m-xl { margin: var(--space-xl); }

.p-0 { padding: 0; }
.p-xs { padding: var(--space-xs); }
.p-sm { padding: var(--space-sm); }
.p-md { padding: var(--space-md); }
.p-lg { padding: var(--space-lg); }
.p-xl { padding: var(--space-xl); }

/* Typography utilities */
.text-xs { font-size: var(--font-size-xs); }
.text-sm { font-size: var(--font-size-sm); }
.text-md { font-size: var(--font-size-md); }
.text-lg { font-size: var(--font-size-lg); }
.text-xl { font-size: var(--font-size-xl); }

.font-light { font-weight: var(--font-weight-light); }
.font-normal { font-weight: var(--font-weight-normal); }
.font-medium { font-weight: var(--font-weight-medium); }
.font-semibold { font-weight: var(--font-weight-semibold); }
.font-bold { font-weight: var(--font-weight-bold); }

/* Border radius utilities */
.rounded-none { border-radius: var(--border-radius-none); }
.rounded-sm { border-radius: var(--border-radius-sm); }
.rounded-md { border-radius: var(--border-radius-md); }
.rounded-lg { border-radius: var(--border-radius-lg); }
.rounded-full { border-radius: var(--border-radius-full); }

/* Shadow utilities */
.shadow-xs { box-shadow: var(--shadow-xs); }
.shadow-sm { box-shadow: var(--shadow-sm); }
.shadow-md { box-shadow: var(--shadow-md); }
.shadow-lg { box-shadow: var(--shadow-lg); }
.shadow-xl { box-shadow: var(--shadow-xl); }

/* Transition utilities */
.transition-fast { transition: all var(--transition-fast); }
.transition-base { transition: all var(--transition-base); }
.transition-slow { transition: all var(--transition-slow); }

/* Accessibility utilities */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

.focus-visible:focus-visible {
  outline: var(--focus-ring-width) solid var(--focus-ring-color);
  outline-offset: var(--focus-ring-offset);
  border-radius: var(--border-radius-sm);
}

/* Skip to content link for keyboard navigation */
.skip-to-content {
  position: absolute;
  top: -40px;
  left: 0;
  background: var(--primary-color);
  color: var(--color-white);
  padding: var(--space-sm) var(--space-md);
  text-decoration: none;
  border-radius: var(--border-radius-sm);
  z-index: var(--z-index-tooltip);
  font-weight: var(--font-weight-semibold);
}

.skip-to-content:focus {
  top: var(--space-sm);
  left: var(--space-sm);
}

/* Touch target minimum size for mobile */
.touch-target {
  min-height: var(--touch-target-min);
  min-width: var(--touch-target-min);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
  :root {
    --color-border-primary: #000;
    --focus-ring-width: 4px;
  }

  [data-theme*="dark"] {
    --color-border-primary: #fff;
  }
}

/* ==================== COMPONENT PATTERNS ==================== */

/* Button Base */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-sm) var(--space-md);
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-normal);
  border-radius: var(--border-radius-md);
  border: var(--border-width-thin) solid transparent;
  cursor: pointer;
  transition: all var(--transition-base);
  text-decoration: none;
  min-height: var(--touch-target-min);
  gap: var(--space-xs);
}

.btn:focus-visible {
  outline: var(--focus-ring-width) solid var(--focus-ring-color);
  outline-offset: var(--focus-ring-offset);
}

.btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.btn-primary {
  background: var(--primary-color);
  color: var(--color-white);
}

.btn-primary:hover:not(:disabled) {
  background: var(--third-color);
}

.btn-secondary {
  background: var(--color-bg-tertiary);
  color: var(--color-text-primary);
  border-color: var(--color-border-primary);
}

.btn-secondary:hover:not(:disabled) {
  background: var(--color-bg-secondary);
}

/* Card Base */
.card {
  background: var(--color-bg-elevated);
  border: var(--border-width-thin) solid var(--color-border-secondary);
  border-radius: var(--border-radius-lg);
  padding: var(--space-lg);
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--transition-base);
}

.card:hover {
  box-shadow: var(--shadow-md);
}

/* Input Base */
.input {
  width: 100%;
  padding: var(--space-sm) var(--space-md);
  font-size: var(--font-size-md);
  line-height: var(--line-height-normal);
  color: var(--color-text-primary);
  background: var(--color-bg-primary);
  border: var(--border-width-thin) solid var(--color-border-primary);
  border-radius: var(--border-radius-md);
  transition: all var(--transition-base);
  min-height: var(--touch-target-min);
}

.input:focus {
  outline: none;
  border-color: var(--color-border-focus);
  box-shadow: var(--shadow-focus);
}

.input:disabled {
  background: var(--color-bg-tertiary);
  color: var(--color-text-disabled);
  cursor: not-allowed;
}

/* Alert/Message Base */
.alert {
  padding: var(--space-md);
  border-radius: var(--border-radius-md);
  border: var(--border-width-thin) solid;
  margin-bottom: var(--space-md);
}

.alert-success {
  background: var(--color-success-bg);
  color: var(--color-success-text);
  border-color: var(--color-success-border);
}

.alert-warning {
  background: var(--color-warning-bg);
  color: var(--color-warning-text);
  border-color: var(--color-warning-border);
}

.alert-error {
  background: var(--color-error-bg);
  color: var(--color-error-text);
  border-color: var(--color-error-border);
}

.alert-info {
  background: var(--color-info-bg);
  color: var(--color-info-text);
  border-color: var(--color-info-border);
}