/* ============================================================
   DESIGN TOKENS — Single source of truth for all CSS variables
   Import this file first in every page to ensure consistency.
   ============================================================ */

:root {
  /* ── Backgrounds ── */
  --color-bg: #060a13;
  --color-bg-alt: #0d1220;
  --color-surface: #0d1320;
  --color-surface-2: #141c2e;
  --color-surface-3: #1a2438;
  --color-surface-hover: #1e2842;

  /* ── Borders ── */
  --color-border: rgba(255, 255, 255, 0.06);
  --color-border-hover: rgba(255, 255, 255, 0.12);

  /* ── Text ── */
  --color-text: #eaf0f9;
  --color-text-muted: #8b95a8;
  --color-text-dim: #5a6478;

  /* ── Brand / Accent ── */
  --color-primary: #3b82f6;
  --color-primary-dark: #2563eb;
  --color-primary-glow: rgba(59, 130, 246, 0.35);
  --color-secondary: #8b5cf6;
  --color-secondary-glow: rgba(139, 92, 246, 0.3);
  --color-accent: #06b6d4;
  --color-accent-glow: rgba(6, 182, 212, 0.3);

  /* ── Semantic ── */
  --color-success: #22c55e;
  --color-success-dim: rgba(34, 197, 94, 0.1);
  --color-warning: #f59e0b;
  --color-error: #ef4444;

  /* ── Gradients ── */
  --gradient-primary: linear-gradient(135deg, #3b82f6, #8b5cf6);
  --gradient-accent: linear-gradient(135deg, #06b6d4, #3b82f6);
  --gradient-success: linear-gradient(135deg, #22c55e, #06b6d4);
  --gradient-warning: linear-gradient(135deg, #f59e0b, #ef4444);
  --gradient-purple: linear-gradient(135deg, #8b5cf6, #ec4899);

  /* ── Glass ── */
  --glass-bg: rgba(19, 26, 43, 0.6);
  --glass-border: rgba(255, 255, 255, 0.08);

  /* ── Typography ── */
  --font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* ── Radii ── */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-full: 9999px;

  /* ── Shadows ── */
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.25);
  --shadow-md: 0 8px 32px rgba(0, 0, 0, 0.35);
  --shadow-lg: 0 16px 48px rgba(0, 0, 0, 0.4);

  /* ── Transitions ── */
  --transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-fast: 0.15s ease;
  --transition-base: 0.3s ease;
  --transition-slow: 0.5s ease;
}

/* ============================================================
   ACCESSIBILITY BASELINE
   :focus-visible for keyboard users, minimum contrast
   ============================================================ */

/* Focus ring — visible only for keyboard navigation */
:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

/* Remove default outline for mouse users */
:focus:not(:focus-visible) {
  outline: none;
}

/* Buttons and interactive elements */
button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[role="button"]:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* Skip to content link (global) */
.skip-to-content {
  position: absolute;
  top: -100%;
  left: 50%;
  transform: translateX(-50%);
  background: var(--color-primary);
  color: #fff;
  padding: 0.75rem 1.5rem;
  border-radius: 0 0 var(--radius-md) var(--radius-md);
  z-index: 10000;
  font-weight: 600;
  text-decoration: none;
  transition: top var(--transition-fast);
}
.skip-to-content:focus {
  top: 0;
}

/* Reduced motion preference */
@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;
  }
}

/* ── Text contrast enforcement ──
   --color-text-muted (#8b95a8) on --color-bg (#060a13) = 5.8:1 ✓ AA
   --color-text-dim (#5a6478) on --color-bg (#060a13) = 3.2:1 ✓ AA Large
   --color-text (#eaf0f9) on --color-bg (#060a13) = 15.1:1 ✓ AAA
*/