/* ==========================================================================
   TOGOBI AUTO CI — Design tokens
   Source unique de vérité du systeme visuel. Aucune valeur brute (couleur,
   espacement, duree) ne doit apparaitre ailleurs que dans ce fichier.

   Direction artistique : fond blanc, texte noir, accent or discret.
   Sobriete assumee — le visuel du vehicule est le seul element qui doit
   attirer l'oeil.
   ========================================================================== */

:root {
  color-scheme: light;

  /* --- Surfaces (du plus clair au plus soutenu) ------------------------ */
  --surface-0: #ffffff; /* fond de page */
  --surface-50: #fbfbfa; /* sections alternees */
  --surface-100: #f6f6f4; /* cartes, champs */
  --surface-150: #f0f0ed;
  --surface-200: #e7e7e3;
  --surface-300: #dcdcd7;
  --surface-400: #c9c9c3;

  /* --- Noir de marque : titres et boutons principaux -------------------- */
  --ink: #0b0b0c;
  --ink-soft: #1c1e21;
  --on-ink: #ffffff;

  /* --- Or signature (versions lisibles sur fond clair) ------------------ */
  --gold-700: #6f5716;
  --gold-600: #8a6c1e;
  --gold-500: #a9862c;
  --gold-400: #c8a44d;
  --gold-300: #e3c77e;
  --gold-100: #f6efdc;

  /* --- Etats semantiques ------------------------------------------------ */
  --emerald: #1f7d4f;
  --emerald-soft: #e6f4ec;
  --amber: #a9701a;
  --amber-soft: #fbf1e0;
  --ruby: #b3402c;
  --ruby-soft: #fbebe7;

  /* --- Texte ------------------------------------------------------------ */
  --text-100: #0b0b0c; /* titres */
  --text-200: #24262a; /* corps */
  --text-300: #565b62; /* secondaire */
  --text-400: #767b83; /* tertiaire */
  --text-500: #9a9ea5; /* discret */

  /* --- Traits ------------------------------------------------------------ */
  --line: rgba(11, 11, 12, 0.1);
  --line-strong: rgba(11, 11, 12, 0.2);
  --surface-glass: rgba(255, 255, 255, 0.78);
  --surface-veil: rgba(255, 255, 255, 0.94);

  /* --- Typographie ------------------------------------------------------ */
  --font-display: 'Sora', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --font-body: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;

  /* Echelle fluide : chaque taille s'adapte a la largeur de la fenetre. */
  --fs-micro: 0.6875rem;
  --fs-xs: 0.75rem;
  --fs-sm: 0.8125rem;
  --fs-base: 0.9375rem;
  --fs-md: clamp(1rem, 0.96rem + 0.2vw, 1.0625rem);
  --fs-lg: clamp(1.125rem, 1.05rem + 0.35vw, 1.375rem);
  --fs-xl: clamp(1.5rem, 1.3rem + 0.9vw, 2rem);
  --fs-2xl: clamp(1.75rem, 1.45rem + 1.4vw, 2.625rem);
  --fs-3xl: clamp(2rem, 1.5rem + 2.4vw, 3.5rem);

  --tracking-wide: 0.08em;
  --tracking-caps: 0.2em;
  --leading-tight: 1.1;
  --leading-snug: 1.3;
  --leading-body: 1.66;

  /* --- Rythme spatial (base 4px) --------------------------------------- */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.25rem;
  --sp-6: 1.5rem;
  --sp-8: 2rem;
  --sp-10: 2.5rem;
  --sp-12: 3rem;
  --sp-16: 4rem;
  --sp-20: 5rem;
  --sp-24: 6rem;
  --section-y: clamp(3rem, 2.2rem + 3.5vw, 5.5rem);

  /* --- Rayons ------------------------------------------------------------ */
  --r-xs: 4px;
  --r-sm: 8px;
  --r-md: 10px;
  --r-lg: 14px;
  --r-xl: 20px;
  --r-pill: 999px;

  /* --- Ombres ------------------------------------------------------------ */
  --shadow-sm: 0 1px 2px rgba(11, 11, 12, 0.06);
  --shadow-md: 0 10px 26px -14px rgba(11, 11, 12, 0.28);
  --shadow-lg: 0 28px 60px -28px rgba(11, 11, 12, 0.35);
  --shadow-gold: 0 14px 32px -16px rgba(169, 134, 44, 0.4);

  /* --- Mouvement --------------------------------------------------------- */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring: cubic-bezier(0.34, 1.4, 0.64, 1);
  --dur-fast: 150ms;
  --dur-base: 240ms;
  --dur-slow: 420ms;
  --dur-reveal: 620ms;

  /* --- Structure ---------------------------------------------------------- */
  --container: 1180px;
  --container-narrow: 880px;
  --gutter: clamp(1.125rem, 0.9rem + 1.6vw, 2.5rem);
  --topbar-h: 38px;
  --header-h: 68px;

  /* --- Plans (z-index) ---------------------------------------------------- */
  --z-base: 1;
  --z-sticky: 40;
  --z-header: 60;
  --z-modal: 90;
  --z-toast: 120;
}

/* Sur ecran etroit, on comprime la hauteur des barres fixes. */
@media (max-width: 720px) {
  :root {
    --header-h: 60px;
    --topbar-h: 36px;
  }
}

/* Respect strict de la preference systeme : on neutralise tout mouvement. */
@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast: 0ms;
    --dur-base: 0ms;
    --dur-slow: 0ms;
    --dur-reveal: 0ms;
  }
}