/* =============================================================
   CloutierMTB — Design System (couche additive)
   ds-tokens.css : variables supplémentaires empilées par-dessus
   variables.css. À charger AVANT ds-layout / ds-components.
   ============================================================= */

:root {
  /* ---------- Surfaces élargies (glassmorphism par niveaux) ---------- */
  --ds-surface-1: rgba(17, 23, 31, 0.72);
  --ds-surface-2: rgba(22, 29, 39, 0.78);
  --ds-surface-3: rgba(28, 36, 48, 0.82);
  --ds-surface-hover: rgba(124, 255, 91, 0.045);
  --ds-surface-active: rgba(124, 255, 91, 0.09);

  /* Bord “hairline” pour cartes sombres, + halo néon discret */
  --ds-hairline: 1px solid rgba(255, 255, 255, 0.07);
  --ds-hairline-strong: 1px solid rgba(255, 255, 255, 0.14);
  --ds-ring-accent: 0 0 0 1px rgba(124, 255, 91, 0.45);
  --ds-ring-info: 0 0 0 1px rgba(91, 200, 255, 0.45);
  --ds-ring-warn: 0 0 0 1px rgba(255, 179, 71, 0.45);
  --ds-ring-danger: 0 0 0 1px rgba(255, 91, 91, 0.45);

  /* Élévation (ombres + lumière latérale très douce) */
  --ds-elev-1: 0 1px 0 rgba(255, 255, 255, 0.04) inset, 0 4px 18px rgba(0, 0, 0, 0.35);
  --ds-elev-2: 0 1px 0 rgba(255, 255, 255, 0.05) inset, 0 14px 34px rgba(0, 0, 0, 0.45);
  --ds-elev-3: 0 1px 0 rgba(255, 255, 255, 0.06) inset, 0 28px 64px rgba(0, 0, 0, 0.55);
  --ds-glow-accent: 0 18px 60px -18px rgba(124, 255, 91, 0.55);
  --ds-glow-info: 0 18px 60px -18px rgba(91, 200, 255, 0.45);

  /* Tons “surface” colorés pour cartes thématiques */
  --ds-tint-accent: linear-gradient(160deg, rgba(124, 255, 91, 0.14), rgba(124, 255, 91, 0.02));
  --ds-tint-info: linear-gradient(160deg, rgba(91, 200, 255, 0.14), rgba(91, 200, 255, 0.02));
  --ds-tint-warn: linear-gradient(160deg, rgba(255, 179, 71, 0.14), rgba(255, 179, 71, 0.02));
  --ds-tint-danger: linear-gradient(160deg, rgba(255, 91, 91, 0.14), rgba(255, 91, 91, 0.02));
  --ds-tint-neutral: linear-gradient(160deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0));

  /* ---------- Rails & grille du shell ---------- */
  --ds-sidebar-w: 268px;
  --ds-sidebar-rail-w: 76px;
  --ds-topbar-h: 64px;
  /* Bornes généreuses pour exploiter les écrans 1440p/1600p/4K sans
     laisser de grosses bandes vides. Clamp garde le texte lisible. */
  --ds-content-max: clamp(1120px, 96vw, 1680px);
  --ds-gutter: clamp(1rem, 2.4vw, 2rem);
  --ds-stack: clamp(0.9rem, 1.4vw, 1.3rem);
  --ds-stack-lg: clamp(1.25rem, 2vw, 1.9rem);

  /* ---------- Typo compacte tableau de bord ---------- */
  --ds-fs-overline: 0.7rem;
  --ds-fs-label: 0.82rem;
  --ds-fs-body: 0.95rem;
  --ds-fs-display: clamp(1.4rem, 2vw + 0.4rem, 1.9rem);

  /* ---------- Motion presets ---------- */
  --ds-ease-spring: cubic-bezier(0.22, 1.25, 0.36, 1);
  --ds-ease-snap: cubic-bezier(0.3, 0, 0.1, 1);
  --ds-dur-xfast: 120ms;
  --ds-dur-fast: 200ms;
  --ds-dur-med: 320ms;
  --ds-dur-slow: 520ms;
  --ds-stagger: 60ms;

  /* ---------- Z-index dashboard ---------- */
  --ds-z-sidebar: 60;
  --ds-z-topbar: 70;
  --ds-z-drawer: 85;
  --ds-z-modal: 100;
  --ds-z-toast: 120;
}

/* Quand l’utilisateur demande du calme, on court-circuite toute animation DS. */
@media (prefers-reduced-motion: reduce) {
  :root {
    --ds-dur-xfast: 0ms;
    --ds-dur-fast: 0ms;
    --ds-dur-med: 0ms;
    --ds-dur-slow: 0ms;
    --ds-stagger: 0ms;
  }
}