/* ============================================================================
   Evotic Edge — Design tokens (Phase 9 v2, enriched)
   Sole source of truth for colors, typography, spacing, radius, motion.
   ============================================================================ */

/* Web fonts + icon font — Phase Bonus-2.6.2 : self-hosted (was Google Fonts + cdnjs).
   Saves ~200ms TTI on MG 3G by eliminating 2 external CDN round-trips. */
@import url('./fonts/nunito.css');
@import url('./fonts/fa-all.css');

:root {
  /* ───── Primary palette (violet Material 3 — refonte 2026-06-13, remplace l'orange) ───── */
  --primary:         #6750A4;
  --primary-dark:    #4F378B;
  --primary-darker:  #381E72;
  --primary-light:   #9A85D6;
  --primary-bg:      #EADDFF;
  --primary-bg-soft: #F5EFFB;
  --primary-grad:    linear-gradient(135deg, #6750A4 0%, #7F67BE 50%, #9A85D6 100%);
  --primary-grad-soft: linear-gradient(135deg, #9A85D6 0%, #C4B5E8 100%);

  /* ───── Neutrals ───── */
  --bg:              #E8E8E8;
  --bg-soft:         #F5F5F5;
  --card-bg:         #ffffff;
  --card-bg-alt:     #FAFAFA;
  --text:            #1C1C2E;
  --text-soft:       #3C3C4E;
  --text-muted:      #6C757D;
  --text-faint:      #B0B0B0;
  --border:          rgba(0, 0, 0, 0.06);
  --border-strong:   rgba(0, 0, 0, 0.12);
  --skeleton:        #F0F0F0;
  --skeleton-strong: #E5E7EB;

  /* ───── Status colors ───── */
  --red:             #EF5350;
  --red-dark:        #C62828;
  --red-bg:          #FFEBEE;
  --green:           #4CAF50;
  --green-dark:      #2E7D32;
  --green-bg:        #E8F5E9;
  --blue:            #1976D2;
  --blue-bg:         #E3F2FD;
  --yellow:          #F57F17;
  --yellow-bg:       #FFF8E1;
  --purple:          #7C3AED;
  --purple-bg:       #EDE9FE;

  /* ───── Typography ───── */
  --font: 'Nunito', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-mono: ui-monospace, 'Cascadia Mono', Menlo, monospace;

  /* ───── Spacing scale (4-px base) ───── */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-7: 32px;
  --sp-8: 40px;
  --sp-9: 56px;

  /* ───── Radius ───── */
  --r-xs:   6px;
  --r-sm:   8px;
  --r-md:   12px;
  --r-lg:   16px;
  --r-xl:   22px;
  --r-2xl:  26px;
  --r-3xl:  32px;
  --r-pill: 999px;

  /* ───── Shadows ───── */
  --shadow-xs:      0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-sm:      0 2px 8px rgba(0, 0, 0, 0.08);
  --shadow-md:      0 4px 16px rgba(0, 0, 0, 0.10);
  --shadow-lg:      0 8px 24px rgba(0, 0, 0, 0.12);
  --shadow-xl:      0 16px 48px rgba(0, 0, 0, 0.16);
  --shadow-card:    0 1px 3px rgba(0, 0, 0, 0.05), 0 1px 2px rgba(0, 0, 0, 0.06);
  --shadow-card-hover: 0 4px 12px rgba(0, 0, 0, 0.08), 0 2px 4px rgba(0, 0, 0, 0.06);
  --shadow-primary:     0 4px 16px rgba(103, 80, 164, 0.28);
  --shadow-primary-lg:  0 8px 28px rgba(103, 80, 164, 0.38);
  --shadow-primary-sm:  0 2px 8px rgba(103, 80, 164, 0.22);
  --shadow-inset:   inset 0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-header:  0 1px 3px rgba(0, 0, 0, 0.04);
  --shadow-nav:     0 -2px 12px rgba(0, 0, 0, 0.06);

  /* ───── Layout ───── */
  --header-h:       64px;
  --bottom-nav-h:   60px;
  --max-w:          540px;
  --safe-bottom:    env(safe-area-inset-bottom, 0px);
  --safe-top:       env(safe-area-inset-top, 0px);
  --safe-left:      env(safe-area-inset-left, 0px);
  --safe-right:     env(safe-area-inset-right, 0px);

  /* ───── Motion ───── */
  --t-fast:    0.12s ease;
  --t-base:    0.2s ease;
  --t-slow:    0.4s cubic-bezier(0.22, 1, 0.36, 1);
  --t-spring:  0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
  --t-instant: 0.06s ease;

  /* ───── Blur (glassmorphism / drawer backdrops) ───── */
  --blur-sm:  4px;
  --blur-md:  8px;
  --blur-lg:  14px;

  /* ───── Z-index scale ───── */
  --z-header:  50;
  --z-nav:     100;
  --z-toast:   150;
  --z-drawer:  200;
  --z-modal:   1000;
  --z-splash:  9999;
}

/* ───── Dark mode (Phase 11.3) — explicit toggle OR auto (OS preference) ───── */
[data-theme="dark"],
[data-theme="auto"] {
  /* "auto" applies dark vars only when OS prefers dark (see media query below) */
}
[data-theme="dark"] {
  --bg:           #0F0F23;
  --bg-soft:      #16162A;
  --card-bg:      #16162A;
  --text:         #E8E8E8;
  --text-soft:    #C7C7CF;
  --text-muted:   #9E9E9E;
  --text-faint:   #555555;
  --border:       rgba(255, 255, 255, 0.10);
  --border-strong:rgba(255, 255, 255, 0.18);
  --skeleton:     rgba(255, 255, 255, 0.06);
  --skeleton-strong: rgba(255, 255, 255, 0.12);
  --primary-bg:      rgba(103, 80, 164, 0.18);
  --primary-bg-soft: rgba(103, 80, 164, 0.10);
  --red-bg:       rgba(239, 83, 80, 0.18);
  --shadow-card:  0 1px 3px rgba(0, 0, 0, 0.6), 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-sm:    0 1px 3px rgba(0, 0, 0, 0.5);
  --shadow-md:    0 4px 12px rgba(0, 0, 0, 0.45);
  --shadow-lg:    0 8px 24px rgba(0, 0, 0, 0.55);
  --shadow-header:0 1px 4px rgba(0, 0, 0, 0.5);
}
@media (prefers-color-scheme: dark) {
  [data-theme="auto"] {
    --bg:           #0F0F23;
    --bg-soft:      #16162A;
    --card-bg:      #16162A;
    --text:         #E8E8E8;
    --text-soft:    #C7C7CF;
    --text-muted:   #9E9E9E;
    --text-faint:   #555555;
    --border:       rgba(255, 255, 255, 0.10);
    --border-strong:rgba(255, 255, 255, 0.18);
    --skeleton:     rgba(255, 255, 255, 0.06);
    --skeleton-strong: rgba(255, 255, 255, 0.12);
    --primary-bg:      rgba(103, 80, 164, 0.18);
    --primary-bg-soft: rgba(103, 80, 164, 0.10);
    --red-bg:       rgba(239, 83, 80, 0.18);
    --shadow-card:  0 1px 3px rgba(0, 0, 0, 0.6), 0 1px 2px rgba(0, 0, 0, 0.4);
    --shadow-sm:    0 1px 3px rgba(0, 0, 0, 0.5);
    --shadow-md:    0 4px 12px rgba(0, 0, 0, 0.45);
    --shadow-lg:    0 8px 24px rgba(0, 0, 0, 0.55);
    --shadow-header:0 1px 4px rgba(0, 0, 0, 0.5);
  }
}

/* ───── Reset + base ───── */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--text);
  font-size: 16px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-tap-highlight-color: transparent;
  text-rendering: optimizeLegibility;
  /* Refonte 2026-05-19 — global app feel : pas de scroll horizontal sur petits
     écrans (anti cut-off droite), et touch-action:manipulation désactive le
     double-tap zoom (complète user-scalable=no du viewport meta). */
  overflow-x: hidden;
  touch-action: manipulation;
}

/* Default focus ring (accessible, primary-colored) */
:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
  border-radius: var(--r-xs);
}
button:focus-visible, a:focus-visible { outline-offset: 3px; }

::selection { background: var(--primary-bg); color: var(--primary-dark); }

/* ───── Utility primitives ───── */
.card {
  background: var(--card-bg);
  border-radius: var(--r-lg);
  padding: var(--sp-4);
  box-shadow: var(--shadow-card);
}
.btn {
  font-family: var(--font);
  font-size: 14px;
  font-weight: 800;
  padding: 12px 18px;
  border-radius: var(--r-lg);
  border: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: transform var(--t-fast), opacity var(--t-fast),
              background var(--t-base), box-shadow var(--t-base);
  -webkit-tap-highlight-color: transparent;
  letter-spacing: 0.02em;
}
.btn:active:not(:disabled) { transform: scale(0.96); }
.btn:disabled { opacity: 0.45; cursor: not-allowed; }
.btn-primary {
  background: var(--primary-grad);
  color: #fff;
  box-shadow: var(--shadow-primary);
}
.btn-primary:hover:not(:disabled) { box-shadow: var(--shadow-primary-lg); }
.btn-secondary {
  background: var(--card-bg);
  color: var(--text);
  border: 1.5px solid var(--border-strong);
}
.btn-secondary:hover:not(:disabled) { background: var(--bg-soft); }
.btn-danger {
  background: var(--red);
  color: #fff;
  box-shadow: 0 4px 14px rgba(239, 83, 80, 0.32);
}
.btn-ghost {
  background: transparent;
  color: var(--text);
}
.btn-ghost:hover:not(:disabled) { background: var(--skeleton); }

.badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: var(--r-pill);
  font-size: 11px;
  font-weight: 700;
  background: var(--skeleton);
  color: var(--text-muted);
  letter-spacing: 0.02em;
}
.badge-primary { background: var(--primary-bg); color: var(--primary); }
.badge-success { background: var(--green-bg); color: var(--green-dark); }
.badge-danger  { background: var(--red-bg);   color: var(--red-dark); }
.badge-info    { background: var(--blue-bg);  color: var(--blue); }
.badge-warn    { background: var(--yellow-bg); color: var(--yellow); }

/* Reduce motion: respect user 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;
  }
}