/**
 * TeleWorld Design System
 * 
 * Centralized CSS variables for consistent design across all pages
 * Based on Design Review Report recommendations
 */

:root {
  /* ===== COLOR SYSTEM ===== */

  /* Primary Purple Palette */
  --color-purple-50: #faf5ff;
  --color-purple-100: #f3e8ff;
  --color-purple-200: #e9d5ff;
  --color-purple-300: #d8b4fe;
  --color-purple-400: #c084fc;
  --color-purple-500: #a855f7; /* Lighter for hover */
  --color-purple-600: #8b5cf6; /* Primary brand color */
  --color-purple-700: #7c3aed; /* Darker for active */
  --color-purple-800: #6d28d9;
  --color-purple-900: #5b21b6;

  /* Background Colors */
  --color-bg-primary: #0f172a;
  --color-bg-secondary: #020617;
  --color-box-light: rgba(30, 41, 59, 0.5);
  --color-box-medium: rgba(30, 41, 59, 0.7);
  --color-box-dark: rgba(30, 41, 59, 0.85); /* Improved contrast */
  --color-box-solid: rgba(30, 41, 59, 1);

  /* Border Colors */
  --color-border-light: rgba(139, 92, 246, 0.2);
  --color-border-medium: rgba(139, 92, 246, 0.3);
  --color-border-strong: rgba(139, 92, 246, 0.5);
  --color-border-solid: rgba(139, 92, 246, 1);

  /* Text Colors */
  --color-text-primary: #e2e8f0;
  --color-text-secondary: #94a3b8;
  --color-text-tertiary: #64748b;
  --color-text-muted: #475569;
  --color-text-inverse: #1e293b;

  /* Status Colors */
  --color-success: #10b981;
  --color-success-light: rgba(16, 185, 129, 0.1);
  --color-success-border: rgba(16, 185, 129, 0.3);
  --color-error: #ef4444;
  --color-error-light: rgba(239, 68, 68, 0.1);
  --color-error-border: rgba(239, 68, 68, 0.3);
  --color-warning: #f59e0b;
  --color-warning-light: rgba(245, 158, 11, 0.1);
  --color-warning-border: rgba(245, 158, 11, 0.3);
  --color-info: #3b82f6;
  --color-info-light: rgba(59, 130, 246, 0.1);
  --color-info-border: rgba(59, 130, 246, 0.3);

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

  /* Font Families */
  --font-family-primary:
    -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu",
    "Cantarell", sans-serif;
  --font-family-display: "Inter", var(--font-family-primary);
  --font-family-mono: "Consolas", "Monaco", "Courier New", monospace;

  /* Font Sizes */
  --font-size-xs: 0.75rem; /* 12px */
  --font-size-sm: 0.875rem; /* 14px */
  --font-size-base: 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-size-5xl: 3rem; /* 48px */

  /* Font Weights */
  --font-weight-light: 300;
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-weight-extrabold: 800;

  /* Line Heights */
  --line-height-tight: 1.25;
  --line-height-snug: 1.375;
  --line-height-normal: 1.5;
  --line-height-relaxed: 1.625;
  --line-height-loose: 1.75;

  /* Letter Spacing */
  --letter-spacing-tighter: -0.05em;
  --letter-spacing-tight: -0.025em;
  --letter-spacing-normal: 0;
  --letter-spacing-wide: 0.025em;
  --letter-spacing-wider: 0.05em;
  --letter-spacing-widest: 0.1em;

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

  --spacing-0: 0;
  --spacing-1: 0.25rem; /* 4px */
  --spacing-2: 0.5rem; /* 8px */
  --spacing-3: 0.75rem; /* 12px */
  --spacing-4: 1rem; /* 16px */
  --spacing-5: 1.25rem; /* 20px */
  --spacing-6: 1.5rem; /* 24px */
  --spacing-8: 2rem; /* 32px */
  --spacing-10: 2.5rem; /* 40px */
  --spacing-12: 3rem; /* 48px */
  --spacing-16: 4rem; /* 64px */
  --spacing-20: 5rem; /* 80px */
  --spacing-24: 6rem; /* 96px */

  /* Named Spacing */
  --spacing-xs: var(--spacing-2);
  --spacing-sm: var(--spacing-3);
  --spacing-md: var(--spacing-4);
  --spacing-lg: var(--spacing-6);
  --spacing-xl: var(--spacing-8);
  --spacing-2xl: var(--spacing-12);

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

  --radius-none: 0;
  --radius-sm: 0.25rem; /* 4px */
  --radius-md: 0.5rem; /* 8px */
  --radius-lg: 0.75rem; /* 12px */
  --radius-xl: 1rem; /* 16px */
  --radius-2xl: 1.5rem; /* 24px */
  --radius-full: 9999px;

  /* Named Radius */
  --radius-input: var(--radius-md);
  --radius-button: var(--radius-md);
  --radius-card: var(--radius-lg);
  --radius-modal: var(--radius-xl);

  /* ===== 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);

  /* Purple Shadows */
  --shadow-purple-sm: 0 4px 12px rgba(139, 92, 246, 0.3);
  --shadow-purple-md: 0 6px 16px rgba(139, 92, 246, 0.4);
  --shadow-purple-lg: 0 10px 30px rgba(139, 92, 246, 0.5);

  /* ===== LAYOUT ===== */

  --header-height: 80px;
  --container-max-width: 1400px;
  --container-padding: 2rem;
  --container-padding-mobile: 1rem;

  /* Grid Gaps */
  --grid-gap-sm: 1rem;
  --grid-gap-md: 1.5rem;
  --grid-gap-lg: 2rem;
  --grid-gap-xl: 3rem;

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

  --z-index-base: 0;
  --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: 9999;
  --z-index-max: 99999;

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

  --transition-fast: 150ms ease;
  --transition-base: 300ms ease;
  --transition-slow: 500ms ease;

  --transition-all: all 300ms ease;
  --transition-colors:
    color 300ms ease, background-color 300ms ease, border-color 300ms ease;
  --transition-transform: transform 300ms ease;
  --transition-opacity: opacity 300ms ease;

  /* ===== BREAKPOINTS (for reference in media queries) ===== */

  /* Use these values in @media queries */
  --breakpoint-xs: 480px;
  --breakpoint-sm: 640px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 1024px;
  --breakpoint-xl: 1280px;
  --breakpoint-2xl: 1536px;
}

/* ===== RESPONSIVE ADJUSTMENTS ===== */

@media (max-width: 1024px) {
  :root {
    --header-height: 72px;
    --container-padding: 1.5rem;
    --font-size-5xl: 2.5rem; /* Slightly smaller on tablet */
    --font-size-4xl: 2rem;
  }
}

@media (max-width: 768px) {
  :root {
    --header-height: 62px;
    --container-padding: 1rem;
    --font-size-5xl: 2rem; /* Even smaller on mobile */
    --font-size-4xl: 1.75rem;
    --font-size-3xl: 1.5rem;
    --spacing-xl: 1.5rem; /* Reduce spacing on mobile */
    --spacing-2xl: 2rem;
  }
}

@media (max-width: 480px) {
  :root {
    --header-height: 58px;
  }
}

@media (max-width: 360px) {
  :root {
    --header-height: 54px;
  }
}

@media (max-height: 500px) and (orientation: landscape) {
  :root {
    --header-height: 52px;
  }
}

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

/* .sr-only — defined in accessibility.css */

/* Focus Visible (keyboard only) */
*:focus-visible {
  outline: 3px solid var(--color-purple-600);
  outline-offset: 2px;
}

*:focus:not(:focus-visible) {
  outline: none;
}

/* Container */
.container {
  max-width: var(--container-max-width);
  margin: 0 auto;
  padding: 0 var(--container-padding);
}

@media (max-width: 768px) {
  .container {
    padding: 0 var(--container-padding-mobile);
  }
}

/* Text Colors */
.text-primary {
  color: var(--color-text-primary);
}
.text-secondary {
  color: var(--color-text-secondary);
}
.text-tertiary {
  color: var(--color-text-tertiary);
}
.text-muted {
  color: var(--color-text-muted);
}

/* Background Colors */
.bg-box-light {
  background: var(--color-box-light);
}
.bg-box-medium {
  background: var(--color-box-medium);
}
.bg-box-dark {
  background: var(--color-box-dark);
}

/* ===== USAGE NOTES ===== */

/*
 * Usage Examples:
 * 
 * Color:
 * .my-element {
 *     background: var(--color-box-dark);
 *     color: var(--color-text-primary);
 *     border: 1px solid var(--color-border-medium);
 * }
 * 
 * Typography:
 * .my-heading {
 *     font-size: var(--font-size-4xl);
 *     font-weight: var(--font-weight-bold);
 *     line-height: var(--line-height-tight);
 *     letter-spacing: var(--letter-spacing-tight);
 * }
 * 
 * Spacing:
 * .my-card {
 *     padding: var(--spacing-lg);
 *     margin-bottom: var(--spacing-xl);
 *     gap: var(--spacing-md);
 * }
 * 
 * Border Radius:
 * .my-button {
 *     border-radius: var(--radius-button);
 * }
 * 
 * Shadows:
 * .my-card {
 *     box-shadow: var(--shadow-lg);
 * }
 * 
 * Transitions:
 * .my-button {
 *     transition: var(--transition-all);
 * }
 * 
 * Z-Index:
 * .my-modal {
 *     z-index: var(--z-index-modal);
 * }
 */