/**
 * Certiwize - Styles globaux
 * Variables CSS et styles partagés par toutes les pages
 */

/* ============================================
   VARIABLES DE THÈME
   ============================================ */
:root {
  /* Couleurs de marque */
  --brand: #7C3AED;
  --brand-600: #6D28D9;
  
  /* Couleurs de fond (mode clair) */
  --bg: #FFFFFF;
  --bg-elev: #F9FAFB;
  
  /* Couleurs de texte (mode clair) */
  --text: #0F172A;
  --muted: #475569;
  
  /* Focus ring */
  --ring: rgba(124, 58, 237, 0.35);
}

/* Mode sombre */
.dark {
  --bg: #0B1020;
  --bg-elev: #11162A;
  --text: #E5E7EB;
  --muted: #A5B4FC;
  --ring: rgba(124, 58, 237, 0.55);
}

/* ============================================
   ACCESSIBILITÉ
   ============================================ */

/* Focus visible pour navigation clavier */
:where(a, button, input, select, textarea, summary):focus-visible {
  outline: 3px solid var(--brand);
  outline-offset: 2px;
}

/* ============================================
   ANIMATIONS
   ============================================ */

/* Animation d'apparition progressive */
@media (prefers-reduced-motion: no-preference) {
  .fade-in {
    animation: fade 0.6s ease-out both;
  }
  
  @keyframes fade {
    from {
      opacity: 0;
      transform: translateY(6px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
}

/* ============================================
   UTILITAIRES
   ============================================ */

/* Classe pour masquer visuellement mais garder accessible */
.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;
}