/* ============================================================================
   TurboContact — Design System V1
   Fondations : tokens, typographie, reset, utilitaires bas-niveau.
   Chargé AVANT le script Tailwind CDN dans base.html.
   Documentation : docs/DESIGN_SYSTEM.md
   ============================================================================ */

/* -------------------------------------------------------------------------- */
/* 1. Typographie — Inter + JetBrains Mono self-hosted                         */
/* -------------------------------------------------------------------------- */

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/static/fonts/Inter-Regular.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/static/fonts/Inter-Medium.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/static/fonts/Inter-SemiBold.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/static/fonts/Inter-Bold.woff2') format('woff2');
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/static/fonts/JetBrainsMono-Regular.woff2') format('woff2');
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/static/fonts/JetBrainsMono-Medium.woff2') format('woff2');
}

/* -------------------------------------------------------------------------- */
/* 2. Tokens — variables CSS exposées globalement                              */
/* -------------------------------------------------------------------------- */

:root {
  /* --- Palette : surfaces & textes --- */
  --bg-primary:     #0f172a;  /* fond pages */
  --bg-secondary:   #1e293b;  /* fond cards */
  --bg-tertiary:    #334155;  /* fond hover / divider */
  --bg-elevated:    #1a2436;  /* modale / dropdown (entre primary et secondary) */
  --border:         #334155;
  --border-strong:  #475569;
  --border-subtle:  #1e293b;

  --text-primary:   #f1f5f9;  /* contraste 14.5:1 sur bg-primary  — AAA */
  --text-secondary: #94a3b8;  /* contraste 5.7:1                  — AA  */
  --text-muted:     #64748b;  /* contraste 3.7:1                  — large text only */
  --text-inverse:   #0f172a;  /* sur fonds clairs (badges) */

  /* --- Palette : accents sémantiques --- */
  --accent-primary:        #3b82f6;  /* boutons primaires, liens */
  --accent-primary-hover:  #2563eb;
  --accent-primary-soft:   rgba(59, 130, 246, 0.12);
  --accent-amber:          #f59e0b;  /* admin / opérations sensibles */
  --accent-amber-hover:    #d97706;
  --accent-amber-soft:     rgba(245, 158, 11, 0.12);
  --accent-success:        #10b981;
  --accent-success-soft:   rgba(16, 185, 129, 0.12);
  --accent-danger:         #ef4444;
  --accent-danger-hover:   #dc2626;
  --accent-danger-soft:    rgba(239, 68, 68, 0.12);
  --accent-warning:        #eab308;
  --accent-warning-soft:   rgba(234, 179, 8, 0.12);

  /* --- Typographie --- */
  --font-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, Consolas, monospace;

  --fs-xs:   11px;
  --fs-sm:   12px;
  --fs-base: 14px;
  --fs-md:   15px;
  --fs-lg:   16px;
  --fs-xl:   18px;
  --fs-2xl:  22px;
  --fs-3xl:  28px;
  --fs-4xl:  36px;

  --lh-tight:  1.2;
  --lh-normal: 1.45;
  --lh-loose:  1.65;

  /* --- Spacing scale (4 / 8 / 12 / 16 / 24 / 32 / 48) --- */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;

  /* --- Radius --- */
  --r-sm: 4px;   /* inputs */
  --r-md: 6px;   /* boutons */
  --r-lg: 8px;   /* cards */
  --r-xl: 12px;  /* cards larges / modales */
  --r-full: 9999px;

  /* --- Shadows (3 niveaux, diffusion douce sur noir) --- */
  --sh-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.25);
  --sh-md: 0 4px 12px -2px rgba(0, 0, 0, 0.35), 0 2px 4px -1px rgba(0, 0, 0, 0.20);
  --sh-lg: 0 18px 40px -8px rgba(0, 0, 0, 0.55), 0 6px 14px -4px rgba(0, 0, 0, 0.30);
  --sh-focus: 0 0 0 3px rgba(59, 130, 246, 0.45);

  /* --- Animations --- */
  --t-fast:    100ms ease-out;
  --t-base:    150ms ease-out;
  --t-slow:    240ms ease-out;
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
}

/* -------------------------------------------------------------------------- */
/* 3. Reset minimal & typographie de base                                      */
/* -------------------------------------------------------------------------- */

html, body {
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  line-height: var(--lh-normal);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

code, kbd, pre, samp, .font-mono, [class*="font-mono"] {
  font-family: var(--font-mono);
  font-feature-settings: 'tnum' 1, 'zero' 1;
}

/* Chiffres tabulaires partout où on aligne des KPIs */
.tabular-nums, [class*="tabular"] {
  font-variant-numeric: tabular-nums;
}

/* -------------------------------------------------------------------------- */
/* 4. Scrollbar discrète (dark)                                                */
/* -------------------------------------------------------------------------- */

::-webkit-scrollbar       { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--bg-primary); }
::-webkit-scrollbar-thumb { background: var(--bg-tertiary); border-radius: var(--r-md); }
::-webkit-scrollbar-thumb:hover { background: var(--border-strong); }
* { scrollbar-color: var(--bg-tertiary) var(--bg-primary); }

/* -------------------------------------------------------------------------- */
/* 5. Focus visible — accessibilité (WCAG 2.4.7)                               */
/* -------------------------------------------------------------------------- */

:focus { outline: none; }
:focus-visible {
  outline: none;
  box-shadow: var(--sh-focus);
  border-radius: var(--r-sm);
}
button:focus-visible,
[role="button"]:focus-visible,
a:focus-visible {
  box-shadow: var(--sh-focus);
}

/* -------------------------------------------------------------------------- */
/* 6. Transitions par défaut sur interactifs                                   */
/* -------------------------------------------------------------------------- */

button, a, [role="button"], input, select, textarea {
  transition-property: background-color, border-color, color, box-shadow, opacity, transform;
  transition-duration: 150ms;
  transition-timing-function: ease-out;
}

/* -------------------------------------------------------------------------- */
/* 7. Animations utilitaires (utilisées par les composants)                    */
/* -------------------------------------------------------------------------- */

@keyframes ds-fade-in   { from { opacity: 0;                    } to { opacity: 1;                       } }
@keyframes ds-fade-up   { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
@keyframes ds-pulse-ring { 0% { box-shadow: 0 0 0 0 currentColor; opacity: .55; }
                          70% { box-shadow: 0 0 0 8px transparent; opacity: 0; }
                         100% { box-shadow: 0 0 0 0 transparent; opacity: 0; } }
@keyframes ds-shimmer    { 0% { background-position: -468px 0; } 100% { background-position: 468px 0; } }
@keyframes ds-spin       { to { transform: rotate(360deg); } }

.ds-anim-fade-in { animation: ds-fade-in var(--t-base); }
.ds-anim-fade-up { animation: ds-fade-up var(--t-slow) var(--ease-out-expo); }

/* Skeleton screens : barre dégradée animée */
.ds-skeleton {
  background: linear-gradient(90deg,
    var(--bg-secondary) 0%,
    var(--bg-tertiary) 50%,
    var(--bg-secondary) 100%);
  background-size: 936px 100%;
  animation: ds-shimmer 1.4s linear infinite;
  border-radius: var(--r-md);
}

/* Spinner inline (boutons loading) */
.ds-spinner {
  display: inline-block;
  width: 1em; height: 1em;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: ds-spin 0.7s linear infinite;
  vertical-align: -0.15em;
}

/* Status dot pulsant (live indicators) */
.ds-pulse-dot {
  position: relative;
  display: inline-block;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: currentColor;
}
.ds-pulse-dot::after {
  content: '';
  position: absolute; inset: 0;
  border-radius: 50%;
  animation: ds-pulse-ring 1.8s ease-out infinite;
  color: inherit;
}

/* -------------------------------------------------------------------------- */
/* 8. Sparkline & SVG inline — réglages communs                                */
/* -------------------------------------------------------------------------- */

.ds-sparkline { display: block; width: 100%; height: 32px; overflow: visible; }
.ds-sparkline path  { fill: none; stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.ds-sparkline .area { fill-opacity: 0.18; stroke: none; }

/* -------------------------------------------------------------------------- */
/* 9. Utilitaires spécifiques (non couverts par Tailwind ou raccourcis)        */
/* -------------------------------------------------------------------------- */

.ds-card-shadow { box-shadow: var(--sh-md); }
.ds-no-scrollbar::-webkit-scrollbar { display: none; }
.ds-no-scrollbar { scrollbar-width: none; }

/* Backdrop blur fallback si non supporté */
@supports not (backdrop-filter: blur(8px)) {
  .ds-backdrop-fallback { background-color: rgba(15, 23, 42, 0.92) !important; }
}

/* Cible cachée par défaut, utilisé conjointement avec Alpine x-cloak */
[x-cloak] { display: none !important; }

/* -------------------------------------------------------------------------- */
/* 10. Reduced motion : on coupe les animations non-essentielles               */
/* -------------------------------------------------------------------------- */

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