/* ============================================================
   DESIGN SYSTEM - Simulateur PMP
   Professional, Modern, Accessible
   Based on OKLCH color model and Emil Kowalski design principles
   ============================================================ */

/* Reset universel : box-sizing border-box.
   Tailwind CDN utilisé ici sans preflight complet → sans ce reset,
   les utilitaires w-full + px-* débordent (padding s'ajoute à la
   largeur au lieu d'être inclus). Cause du wrapper question qui
   dépassait le viewport à droite sur mobile. */
*,
*::before,
*::after {
  box-sizing: border-box;
}

:root {
  /* ============================================================
     COLOR PALETTE - OKLCH (Perceptually uniform)
     Primary: Professional Blue (PMI Brand)
     Secondary: Education Gold, Success Green, Warning Orange
     Neutrals: Clean grays with slight blue tint
  ============================================================ */
  
  /* Primary Brand Color - PMI Blue */
  --color-primary-50: oklch(94.5% 0.065 236);   /* Very light */
  --color-primary-100: oklch(89.5% 0.12 236);   /* Light */
  --color-primary-200: oklch(84% 0.16 236);     /* Lighter */
  --color-primary-300: oklch(74% 0.18 236);     /* Medium-light */
  --color-primary-400: oklch(62% 0.2 236);      /* Medium */
  --color-primary-500: oklch(56% 0.22 236);     /* PRIMARY: #0062a9 equivalent */
  --color-primary-600: oklch(50% 0.24 236);     /* Dark */
  --color-primary-700: oklch(44% 0.25 236);     /* Darker */
  --color-primary-800: oklch(36% 0.26 236);     /* Very dark */
  --color-primary-900: oklch(28% 0.24 236);     /* Darkest */
  
  /* Success Green - Achievement, Correct answers */
  --color-success-50: oklch(94% 0.08 142);
  --color-success-100: oklch(89% 0.13 142);
  --color-success-200: oklch(84% 0.17 142);
  --color-success-300: oklch(75% 0.2 142);
  --color-success-400: oklch(65% 0.22 142);
  --color-success-500: oklch(56% 0.24 142);     /* Vibrant green */
  --color-success-600: oklch(50% 0.25 142);
  --color-success-700: oklch(44% 0.24 142);
  --color-success-800: oklch(36% 0.22 142);
  --color-success-900: oklch(28% 0.18 142);
  
  /* Warning Orange - Incorrect answers, attention needed */
  --color-warning-50: oklch(94% 0.08 52);
  --color-warning-100: oklch(89% 0.13 52);
  --color-warning-200: oklch(84% 0.16 52);
  --color-warning-300: oklch(75% 0.19 52);
  --color-warning-400: oklch(65% 0.21 52);
  --color-warning-500: oklch(56% 0.23 52);     /* Warm orange */
  --color-warning-600: oklch(50% 0.24 52);
  --color-warning-700: oklch(44% 0.23 52);
  --color-warning-800: oklch(36% 0.2 52);
  --color-warning-900: oklch(28% 0.16 52);
  
  /* Error Red - Failed, critical */
  --color-error-50: oklch(94% 0.08 28);
  --color-error-100: oklch(89% 0.14 28);
  --color-error-200: oklch(84% 0.18 28);
  --color-error-300: oklch(75% 0.22 28);
  --color-error-400: oklch(65% 0.24 28);
  --color-error-500: oklch(54% 0.26 28);       /* Bold red */
  --color-error-600: oklch(48% 0.27 28);
  --color-error-700: oklch(42% 0.26 28);
  --color-error-800: oklch(34% 0.22 28);
  --color-error-900: oklch(26% 0.16 28);
  
  /* Neutral Gray - Clean, professional */
  --color-neutral-50: oklch(97.8% 0.002 236);  /* Near white */
  --color-neutral-100: oklch(95.8% 0.006 236); /* Off white */
  --color-neutral-200: oklch(92% 0.008 236);   /* Light gray */
  --color-neutral-300: oklch(88% 0.01 236);    /* Lighter gray */
  --color-neutral-400: oklch(74% 0.012 236);   /* Medium gray */
  --color-neutral-500: oklch(60% 0.014 236);   /* Medium-dark gray */
  --color-neutral-600: oklch(50% 0.016 236);   /* Dark gray */
  --color-neutral-700: oklch(40% 0.018 236);   /* Darker gray */
  --color-neutral-800: oklch(30% 0.016 236);   /* Very dark gray */
  --color-neutral-900: oklch(20% 0.01 236);    /* Almost black */
  
  /* Surface & Background */
  --color-bg-primary: oklch(97.8% 0.002 236);  /* Main background */
  --color-bg-secondary: oklch(95% 0.008 236);  /* Alternative background */
  --color-surface: oklch(99% 0 0);             /* Cards, elevated surfaces */
  --color-surface-variant: oklch(94% 0.008 236); /* Subtle surface tint */
  
  /* Text Colors */
  --color-text-primary: oklch(15% 0.01 236);   /* Main text */
  --color-text-secondary: oklch(45% 0.015 236); /* Muted text */
  --color-text-tertiary: oklch(60% 0.01 236);  /* Lowest emphasis */
  --color-text-inverse: oklch(98% 0.002 0);    /* White text */
  
  /* Border & Divider */
  --color-border: oklch(88% 0.01 236);
  --color-border-light: oklch(92% 0.008 236);
  --color-divider: oklch(90% 0.01 236);
  
  /* Shadows - Subtle but present */
  --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 0 rgba(0, 0, 0, 0.06);
  --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);
  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
  
  /* Easing Curves - Emil Kowalski style */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --ease-out-quart: cubic-bezier(0.165, 0.84, 0.44, 1);
  --ease-out-expo: cubic-bezier(0.19, 1, 0.22, 1);
  
  /* Z-Index Scale - Semantic */
  --z-dropdown: 50;
  --z-sticky: 60;
  --z-modal-backdrop: 100;
  --z-modal: 110;
  --z-toast: 120;
  --z-tooltip: 130;
  --z-fullscreen: 1000;
  
  /* Spacing System - 4px base unit */
  --space-xs: 0.25rem;    /* 4px */
  --space-sm: 0.5rem;     /* 8px */
  --space-md: 1rem;       /* 16px */
  --space-lg: 1.5rem;     /* 24px */
  --space-xl: 2rem;       /* 32px */
  --space-2xl: 3rem;      /* 48px */
  --space-3xl: 4rem;      /* 64px */
  
  /* Typography Scale */
  --text-xs: 0.75rem;     /* 12px */
  --text-sm: 0.875rem;    /* 14px */
  --text-base: 1rem;      /* 16px */
  --text-lg: 1.125rem;    /* 18px */
  --text-xl: 1.25rem;     /* 20px */
  --text-2xl: 1.5rem;     /* 24px */
  --text-3xl: 1.875rem;   /* 30px */
  --text-4xl: 2.25rem;    /* 36px */
  
  /* Line Heights */
  --leading-tight: 1.25;
  --leading-normal: 1.5;
  --leading-relaxed: 1.75;
  --leading-loose: 2;
  
  /* Border Radius */
  --radius-none: 0;
  --radius-sm: 0.375rem;  /* 6px */
  --radius-md: 0.5rem;    /* 8px */
  --radius-lg: 0.75rem;   /* 12px */
  --radius-xl: 1rem;      /* 16px */
  --radius-2xl: 1.5rem;   /* 24px */
  --radius-full: 9999px;
  
  /* Transitions - Default durations */
  --duration-fast: 150ms;
  --duration-normal: 200ms;
  --duration-slow: 300ms;

  /* ============================================================
     UNIFIED FOCUS RINGS (une seule recette pour tout le site)
     ============================================================ */
  --focus-ring: 0 0 0 3px color-mix(in oklch, var(--color-primary-500) 24%, transparent);
  --focus-ring-error: 0 0 0 3px color-mix(in oklch, var(--color-error-500) 24%, transparent);
  --focus-ring-success: 0 0 0 3px color-mix(in oklch, var(--color-success-500) 24%, transparent);
  --focus-outline: 2px solid var(--color-primary-500);
  --focus-outline-offset: 2px;

  /* ============================================================
     BRAND ACCENT LEGACY — pointe vers le token oklch
     Migration progressive : garder le nom `--brand-blue` mais dériver du DS.
     ============================================================ */
  --brand-blue: var(--color-primary-500);
  --brand-blue-hover: var(--color-primary-600);
  --brand-blue-active: var(--color-primary-700);
}

/* ============================================================
   TYPOGRAPHY IMPROVEMENTS
   Better hierarchy, readability, and visual balance
   ============================================================ */

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Helvetica Neue', Arial, sans-serif;
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--color-text-primary);
  background-color: var(--color-bg-primary);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
  font-weight: 600;
  line-height: var(--leading-tight);
  color: var(--color-text-primary);
  margin: 0;
}

h1 {
  font-size: clamp(1.875rem, 5vw, 2.25rem);
  margin-bottom: var(--space-lg);
  letter-spacing: -0.02em;
}

h2 {
  font-size: clamp(1.5rem, 4vw, 1.875rem);
  margin-bottom: var(--space-md);
  letter-spacing: -0.01em;
}

h3 {
  font-size: clamp(1.25rem, 3vw, 1.5rem);
  margin-bottom: var(--space-md);
  letter-spacing: -0.005em;
}

p {
  max-width: 70ch;
  margin: 0 0 var(--space-md) 0;
  color: var(--color-text-primary);
}

/* ============================================================
   BUTTON DESIGN - Interactive & Accessible
   ============================================================ */

button, [role="button"], input[type="button"], input[type="submit"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  padding: 0.625rem 1rem;
  font-size: var(--text-sm);
  font-weight: 600;
  border: none;
  border-radius: var(--radius-lg);
  cursor: pointer;
  transition: all var(--duration-normal) var(--ease-out);
  touch-action: manipulation;
  min-height: 44px; /* WCAG touch target */
  user-select: none;
  text-decoration: none;
}

/* Primary Button */
.btn-primary {
  background-color: var(--color-primary-500);
  color: white;
  box-shadow: var(--shadow-sm);
}

.btn-primary:hover {
  background-color: var(--color-primary-600);
  box-shadow: var(--shadow-md);
}

.btn-primary:active {
  transform: scale(0.97);
  background-color: var(--color-primary-700);
}

.btn-primary:focus-visible {
  outline: 2px solid var(--color-primary-500);
  outline-offset: 2px;
}

/* Secondary Button */
.btn-secondary {
  background-color: var(--color-neutral-100);
  color: var(--color-text-primary);
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-xs);
}

.btn-secondary:hover {
  background-color: var(--color-neutral-200);
  border-color: var(--color-border);
  box-shadow: var(--shadow-sm);
}

.btn-secondary:active {
  transform: scale(0.97);
  background-color: var(--color-neutral-300);
}

/* Success Button */
.btn-success {
  background-color: var(--color-success-500);
  color: white;
  box-shadow: var(--shadow-sm);
}

.btn-success:hover {
  background-color: var(--color-success-600);
  box-shadow: var(--shadow-md);
}

.btn-success:active {
  transform: scale(0.97);
  background-color: var(--color-success-700);
}

/* ============================================================
   FORM ELEMENTS - Input, Select, etc.
   ============================================================ */

input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
select,
textarea {
  padding: 0.5rem 0.75rem;
  font-size: var(--text-base);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background-color: var(--color-surface);
  color: var(--color-text-primary);
  transition: all var(--duration-fast) var(--ease-out);
  min-height: 44px;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="number"]:focus,
select:focus,
textarea:focus {
  outline: none;
  border-color: var(--color-primary-500);
  box-shadow: 0 0 0 3px var(--color-primary-50);
  background-color: var(--color-surface);
}

/* ============================================================
   CARDS & CONTAINERS - Clean, Professional
   ============================================================ */

.card {
  background-color: var(--color-surface);
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  box-shadow: var(--shadow-xs);
  transition: all var(--duration-normal) var(--ease-out);
}

.card:hover {
  border-color: var(--color-border);
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

/* ============================================================
   BADGES & PILLS - Status indicators
   ============================================================ */

.badge {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.25rem 0.75rem;
  font-size: var(--text-xs);
  font-weight: 600;
  border-radius: var(--radius-full);
  white-space: nowrap;
}

.badge-success {
  background-color: var(--color-success-50);
  color: var(--color-success-700);
}

.badge-warning {
  background-color: var(--color-warning-50);
  color: var(--color-warning-700);
}

.badge-error {
  background-color: var(--color-error-50);
  color: var(--color-error-700);
}

.badge-primary {
  background-color: var(--color-primary-50);
  color: var(--color-primary-700);
}

/* ============================================================
   PROGRESS BAR - Visual feedback
   ============================================================ */

.progress {
  height: 8px;
  background-color: var(--color-neutral-200);
  border-radius: var(--radius-full);
  overflow: hidden;
}

.progress-fill {
  height: 100%;
  background: linear-gradient(90deg, 
    var(--color-primary-500) 0%,
    var(--color-primary-400) 100%
  );
  border-radius: var(--radius-full);
  transition: width var(--duration-slow) var(--ease-out);
}

/* ============================================================
   ACCESSIBILITY - Focus states, high contrast
   ============================================================ */

:focus-visible {
  outline: 2px solid var(--color-primary-500);
  outline-offset: 2px;
}

/* High contrast mode support */
@media (prefers-contrast: more) {
  body {
    --color-text-primary: oklch(10% 0.008 236);
    --color-text-secondary: oklch(35% 0.012 236);
  }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ============================================================
   RESPONSIVE IMPROVEMENTS
   Mobile-first, adaptive design
   ============================================================ */

@media (max-width: 768px) {
  body {
    font-size: var(--text-sm);
  }
  
  h1 {
    font-size: clamp(1.5rem, 4vw, 1.875rem);
  }
  
  h2 {
    font-size: clamp(1.25rem, 3vw, 1.5rem);
  }
  
  button {
    min-height: 48px; /* Slightly larger on mobile */
    padding: 0.75rem 1rem;
  }
}

/* ============================================================
   SIDEBAR & QUESTION NAVIGATION
   ============================================================ */

.question-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-md);
  border: 2px solid var(--color-border-light);
  background-color: var(--color-surface);
  padding: 0.5rem;
  font-weight: 600;
  min-height: 3rem;
  cursor: pointer;
  user-select: none;
  transition: all var(--duration-normal) var(--ease-out);
  position: relative;
}

.question-box:hover {
  border-color: var(--color-primary-300);
  background-color: var(--color-primary-50);
  transform: translateY(-2px);
  box-shadow: var(--shadow-sm);
}

.question-box.active {
  border-color: var(--color-primary-500);
  background-color: var(--color-primary-100);
  box-shadow: 0 0 0 3px var(--color-primary-50);
  transform: scale(1.08);
}

.question-box.correct {
  border-color: var(--color-success-500);
  background-color: var(--color-success-100);
  color: var(--color-success-700);
  font-weight: 700;
}

.question-box.incorrect {
  border-color: var(--color-error-500);
  background-color: var(--color-error-100);
  color: var(--color-error-700);
  font-weight: 700;
}

/* Flag indicator - Small badge */
.question-flag {
  position: absolute;
  top: -6px;
  right: -6px;
  width: 20px;
  height: 20px;
  background: white;
  border: 2px solid var(--color-warning-500);
  border-radius: 50%;
  font-size: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-md);
}

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

.text-muted {
  color: var(--color-text-secondary);
}

.text-light {
  color: var(--color-text-tertiary);
}

.bg-light {
  background-color: var(--color-bg-secondary);
}

.border-light {
  border-color: var(--color-border-light);
}

.transition-all {
  transition: all var(--duration-normal) var(--ease-out);
}

.transition-fast {
  transition: all var(--duration-fast) var(--ease-out);
}

.shadow-xs {
  box-shadow: var(--shadow-xs);
}

.shadow-sm {
  box-shadow: var(--shadow-sm);
}

.shadow-md {
  box-shadow: var(--shadow-md);
}

.rounded-lg {
  border-radius: var(--radius-lg);
}

.rounded-xl {
  border-radius: var(--radius-xl);
}