/* CAPA Design Tokens v1 */
/* Dark theme foundation with CAPA purple accents */

:root {
  /* === Color Palette === */
  --capa-bg: #0f0f13;
  --capa-surface: #15151b;
  --capa-surface-alt: #1a1a22;
  --capa-purple: #B888FF;
  --capa-purple-200: #C8A0FF;
  --capa-purple-300: #C299FF;
  --capa-purple-600: #A670FF;
  --capa-purple-700: #9458FF;
  --capa-pink: #ff9dd9;
  --accent-green: #c5f3c9;
  --muted: #6b7280;
  --text: #e9ecf2;
  --text-light: #d1d5db;
  --white: #ffffff;
  --black: #000000;
  
  /* === Typography === */
  --font-sans: 'Inter', 'Poppins', system-ui, -apple-system, sans-serif;
  --font-weight-display: 600;
  --font-weight-body: 400;
  --font-weight-light: 300;
  
  /* === Spacing === */
  --spacing-xs: 0.25rem;
  --spacing-sm: 0.5rem;
  --spacing-md: 1rem;
  --spacing-lg: 1.5rem;
  --spacing-xl: 2rem;
  --spacing-2xl: 3rem;
  --spacing-3xl: 4rem;
  
  /* === Border Radius === */
  --radius-sm: 0.375rem;
  --radius-md: 0.5rem;
  --radius-lg: 1rem;
  --radius-xl: 1.5rem;
  --radius-2xl: 2rem;
  --radius-full: 9999px;
  
  /* === Shadows === */
  --shadow-soft: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
  --shadow-medium: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --shadow-large: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  --shadow-ambient: 0 0 20px rgba(172, 130, 254, 0.2);
  
  /* === Animation === */
  --easing-smooth: cubic-bezier(0.22, 1, 0.36, 1);
  --duration-fast: 300ms;
  --duration-normal: 600ms;
  --duration-slow: 1000ms;
  
  /* === Layout === */
  --header-height: 80px;
  --sticky-top: var(--header-height);
  --container-max: 1200px;
  --container-padding: 1.5rem;
  
  /* === Z-Index Scale === */
  --z-base: 0;
  --z-dropdown: 1000;
  --z-sticky: 1020;
  --z-header: 1030;
  --z-modal: 1040;
  --z-tooltip: 1050;
}

/* === Feature Flag Support === */
[data-theme="capav1"] {
  /* Apply dark theme when COSMETIC_THEME=capav1 */
  background-color: var(--capa-bg);
  color: var(--text);
}

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

.skip-to-content {
  position: absolute;
  top: -40px;
  left: 6px;
  background: var(--capa-purple);
  color: var(--white);
  padding: 8px;
  border-radius: var(--radius-md);
  text-decoration: none;
  z-index: var(--z-tooltip);
  transition: top var(--duration-fast) var(--easing-smooth);
}

.skip-to-content:focus {
  top: 6px;
}

/* === 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;
  }
  
  .reveal, 
  .float, 
  .drift, 
  .car,
  .building,
  .motto-cycle {
    animation: none !important;
    transition: none !important;
  }
}