/* ============================================
   FRANCOPHONE ACADEMY — DESIGN TOKENS
   Theme "Bleu France" — clair, bleu royal + corail
   ============================================ */

:root {
  /* ---------- Colors: Surfaces ---------- */
  --color-bg:            #f4f7fb;
  --color-bg-elevated:   #ffffff;
  --color-bg-card:       #ffffff;
  --color-bg-hover:      #e8eef7;
  --color-bg-overlay:    rgba(244, 247, 251, 0.92);

  /* ---------- Colors: Text ---------- */
  --color-text:          #10192b;
  --color-text-secondary:#2b3952;
  --color-text-muted:    #49546b;
  --color-text-inverse:  #ffffff;

  /* ---------- Colors: Brand ---------- */
  --color-accent:        #2b5ce6;
  --color-accent-hover:  #1e49c8;
  --color-accent-soft:   rgba(43, 92, 230, 0.10);
  --color-accent-border: rgba(43, 92, 230, 0.35);

  --color-coral:         #e0654f;
  --color-coral-soft:    rgba(224, 101, 79, 0.12);

  --color-success:       #22a06b;
  --color-success-soft:  rgba(34, 160, 107, 0.12);
  --color-info:          #3b82c4;
  --color-info-soft:     rgba(59, 130, 196, 0.12);
  --color-warning:       #d99434;
  --color-warning-soft:  rgba(217, 148, 52, 0.12);

  /* ---------- Borders ---------- */
  --color-border:        rgba(23, 32, 46, 0.17);
  --color-border-strong: rgba(23, 32, 46, 0.32);

  /* ---------- Typography ---------- */
  --font-display: 'Fraunces', Georgia, serif;
  --font-body:    'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono:    'JetBrains Mono', 'Courier New', monospace;

  --text-xs:   0.75rem;
  --text-sm:   0.875rem;
  --text-base: 1rem;
  --text-lg:   1.125rem;
  --text-xl:   1.375rem;
  --text-2xl:  1.75rem;
  --text-3xl:  2.25rem;
  --text-4xl:  3rem;
  --text-5xl:  3.75rem;

  --weight-normal:   400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;

  /* ---------- Spacing ---------- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-8: 3rem;
  --space-10: 4rem;
  --space-12: 6rem;

  /* ---------- Radius ---------- */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-full: 999px;

  /* ---------- Shadows ---------- */
  --shadow-sm: 0 1px 3px rgba(23, 32, 46, 0.06);
  --shadow-md: 0 4px 16px rgba(23, 32, 46, 0.08);
  --shadow-lg: 0 12px 40px rgba(23, 32, 46, 0.12);
  --shadow-glow: 0 0 40px rgba(43, 92, 230, 0.18);

  /* ---------- Layout ---------- */
  --header-height: 72px;
  --sidebar-width: 260px;
  --sidebar-collapsed: 72px;
  --container-max: 1200px;

  /* ---------- Transitions ---------- */
  --transition-fast: 150ms ease;
  --transition-base: 250ms ease;
  --transition-slow: 400ms cubic-bezier(0.16, 1, 0.3, 1);

  /* ---------- Z-index ---------- */
  --z-header: 100;
  --z-sidebar: 90;
  --z-modal: 200;
  --z-toast: 300;
  --z-tutor: 150;
}

/* ---------- Dark theme (optionnel, ancien theme conserve) ---------- */
[data-theme="dark"] {
  --color-bg:            #0d0f14;
  --color-bg-elevated:   #141822;
  --color-bg-card:       #181d29;
  --color-bg-hover:      #1f2533;
  --color-bg-overlay:    rgba(13, 15, 20, 0.85);
  --color-text:          #f2f3f7;
  --color-text-secondary:#a8afc0;
  --color-text-muted:    #6b7280;
  --color-text-inverse:  #0d0f14;
  --color-accent:        #c9a227;
  --color-accent-hover:  #dcb536;
  --color-accent-soft:   rgba(201, 162, 39, 0.12);
  --color-accent-border: rgba(201, 162, 39, 0.35);
  --color-border:        rgba(255, 255, 255, 0.08);
  --color-border-strong: rgba(255, 255, 255, 0.14);
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.45);
  --shadow-lg: 0 12px 40px rgba(0, 0, 0, 0.55);
  --shadow-glow: 0 0 40px rgba(201, 162, 39, 0.15);
}