/*
CSS Scoping Note: All styles in this file use CSS custom properties (CSS variables) 
to prevent interference between components. When adding new styles, always scope them 
to their respective components using class prefixes (e.g., .component-name .element).
*/

:root {
  --color-primary: #0066cc;
  --color-primary-hover: #0052a3;
  --color-secondary: #6b7280;
  --color-success: #10b981;
  --color-danger: #ef4444;
  --color-warning: #f59e0b;
  
  --color-background: #ffffff;
  --color-surface: #f9fafb;
  --color-surface-alt: #f3f4f6;
  --color-hover-bg: #f3f4f6;
  --color-border: #e5e7eb;
  --color-border-light: #f3f4f6;
  
  --color-text-primary: #111827;
  --color-text-secondary: #4b5563;
  --color-text-tertiary: #6b7280;
  --color-text-inverse: #ffffff;
  
  --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);
  
  --radius-sm: 0.375rem;
  --radius-md: 0.5rem;
  --radius-lg: 0.75rem;
  
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-mono: 'JetBrains Mono', 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', monospace;
}

[data-theme="dark"] {
  --color-primary: #60a5fa;
  --color-primary-hover: #93c5fd;
  --color-secondary: #94a3b8;
  
  --color-background: #0f172a;
  --color-surface: #1e293b;
  --color-surface-alt: #334155;
  --color-hover-bg: #334155;
  --color-border: #475569;
  --color-border-light: #334155;
  
  --color-text-primary: #f8fafc;
  --color-text-secondary: #cbd5e1;
  --color-text-tertiary: #94a3b8;
  --color-text-inverse: #0f172a;
  
  --shadow-sm: 0 1px 2px 0 rgba(15, 23, 42, 0.4);
  --shadow-md: 0 4px 6px -1px rgba(15, 23, 42, 0.4), 0 2px 4px -1px rgba(15, 23, 42, 0.3);
  --shadow-lg: 0 10px 15px -3px rgba(15, 23, 42, 0.4), 0 4px 6px -2px rgba(15, 23, 42, 0.3);
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  font-family: var(--font-sans);
  font-size: 1rem;
  line-height: 1.5;
  color: var(--color-text-primary);
  background-color: var(--color-background);
  transition: background-color 0.3s ease, color 0.3s ease;
}

h1, h2, h3, h4, h5, h6 {
  font-weight: 600;
  line-height: 1.2;
  margin-bottom: 0.5em;
}

h1 { font-size: 3rem; }
h2 { font-size: 2.25rem; }
h3 { font-size: 1.875rem; }
h4 { font-size: 1.5rem; }
h5 { font-size: 1.25rem; }
h6 { font-size: 1rem; }

a {
  color: var(--color-primary);
  text-decoration: none;
  transition: color 0.2s ease;
}

/* Skip Links for Keyboard Navigation Accessibility */
.skip-links {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 9999;
}

.skip-link {
  position: absolute;
  top: -40px;
  left: 6px;
  background: var(--color-primary);
  color: var(--color-text-inverse);
  padding: 8px 16px;
  text-decoration: none;
  border-radius: var(--radius-sm);
  font-weight: 600;
  font-size: 0.875rem;
  border: 2px solid transparent;
  transition: all 0.2s ease;
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
}

.skip-link:focus {
  top: 6px;
  color: var(--color-text-inverse);
  outline: 2px solid var(--color-text-inverse);
  outline-offset: 2px;
  opacity: 1;
  visibility: visible;
}

.skip-link:hover:focus {
  background: var(--color-primary-hover);
}

/* Enhanced Focus Management for Accessibility */
*:focus {
  outline: none; /* Remove default outline, we'll use focus-visible */
}

*:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* Button Focus Styles */
button:focus-visible,
.btn:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
  box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.1);
}

/* Link Focus Styles */
a:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
  text-decoration: underline;
}

/* Form Element Focus Styles */
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.1);
}

/* Navigation Button Focus (for dropdown triggers) */
.nav-link:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
  background-color: var(--color-hover-bg);
}

/* FAQ Button Focus */
.faq-question:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
  background-color: var(--color-hover-bg);
}

/* Dark Mode Focus Adjustments */
[data-theme="dark"] *:focus-visible,
[data-theme="dark"] button:focus-visible,
[data-theme="dark"] .btn:focus-visible,
[data-theme="dark"] a:focus-visible {
  outline-color: var(--color-primary);
}

[data-theme="dark"] button:focus-visible,
[data-theme="dark"] .btn:focus-visible {
  box-shadow: 0 0 0 4px rgba(96, 165, 250, 0.2);
}

[data-theme="dark"] input:focus-visible,
[data-theme="dark"] select:focus-visible,
[data-theme="dark"] textarea:focus-visible {
  box-shadow: 0 0 0 4px rgba(96, 165, 250, 0.2);
}

a:hover {
  color: var(--color-primary-hover);
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.5rem 1rem;
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.5;
  border-radius: var(--radius-md);
  border: 1px solid transparent;
  cursor: pointer;
  transition: all 0.2s ease;
  text-decoration: none;
  white-space: nowrap;
}

.btn-primary {
  background-color: var(--color-primary);
  color: var(--color-text-inverse);
  border-color: var(--color-primary);
}

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

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

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

.btn-large {
  padding: 0.75rem 1.5rem;
  font-size: 1rem;
}

.container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1rem;
}

@media (max-width: 768px) {
  h1 { font-size: 2rem; }
  h2 { font-size: 1.75rem; }
  h3 { font-size: 1.5rem; }
  h4 { font-size: 1.25rem; }
}