/* =========================================================
   MOTORLUX — DESIGN TOKENS (REFONTE 2026-05)
   Palette : Anthracite & Or rouge — Premium Automotive
   Inspirations : Brembo, Pirelli, AMG, Akrapovič, Tag Heuer
   ========================================================= */

:root {
  /* ---------- COULEURS — Bases acier brossé ---------- */
  --c-bg-0:        #060608;   /* noir profond — footer / fond le plus bas */
  --c-bg-1:        #0c0c10;   /* fond principal — corps de page */
  --c-bg-2:        #131319;   /* surfaces cards */
  --c-bg-3:        #1b1b22;   /* surfaces hover / élevées */
  --c-bg-4:        #25252e;   /* surfaces très hautes / inputs */

  --c-line:        rgba(255, 245, 230, 0.06);
  --c-line-strong: rgba(255, 245, 230, 0.13);

  /* Texte — gamme ivoire / chrome / acier */
  --c-fg-0:        #f6f5ef;   /* ivoire chrome — titres */
  --c-fg-1:        #e6e4d8;   /* texte principal */
  --c-fg-2:        #9b9a8e;   /* texte secondaire — gris pierre */
  --c-fg-3:        #5e5d52;   /* texte tertiaire / placeholders */

  /* ---------- ACCENT PRINCIPAL — ROUGE PASSION AUTOMOBILE ---------- */
  /* Variable nommée --c-lime conservée pour compat (cf PROJECT_STATE.md). */
  --c-lime:        #e11d2e;   /* rouge profond — passion / racing héritage */
  --c-lime-soft:   rgba(225, 29, 46, 0.14);
  --c-lime-deep:   #b21726;   /* rouge sang — états pressés */
  --c-lime-glow:   rgba(225, 29, 46, 0.45);

  /* ---------- ACCENT SECONDAIRE — OR CHROME / AMBRE ---------- */
  /* Variable nommée --c-cyan conservée pour compat. */
  --c-cyan:        #d4a652;   /* or vieilli / chrome doré — luxe industriel */
  --c-cyan-soft:   rgba(212, 166, 82, 0.13);
  --c-cyan-deep:   #b8893a;

  /* ---------- ACCENT TERTIAIRE — BLEU ACIER ---------- */
  /* Variable nommée --c-violet conservée pour compat. */
  --c-violet:      #7c8a9a;   /* steel blue mat — outillage / specs */
  --c-violet-soft: rgba(124, 138, 154, 0.12);

  /* ---------- SÉMANTIQUE ---------- */
  --c-success:     #4ade80;   /* vert garage — devis confirmé */
  --c-warning:     #f59e0b;   /* ambre signalétique */
  --c-danger:      #ef4444;

  /* ---------- DÉGRADÉS ---------- */
  /* Signature Motorlux : rouge → or — feu / chaleur / atelier */
  --grad-neon:     linear-gradient(135deg, var(--c-lime) 0%, var(--c-cyan) 100%);
  /* Variante alternative — or → acier — pour USP / blocs neutres */
  --grad-violet:   linear-gradient(135deg, var(--c-cyan) 0%, var(--c-violet) 100%);
  /* Hero : ambiance atelier illuminé latéralement par les phares */
  --grad-hero:     radial-gradient(ellipse at 18% 25%, rgba(225, 29, 46, 0.18), transparent 55%),
                   radial-gradient(ellipse at 82% 70%, rgba(212, 166, 82, 0.13), transparent 55%),
                   radial-gradient(ellipse at 50% 100%, rgba(225, 29, 46, 0.08), transparent 60%);

  /* Métal brossé — pour cards premium */
  --grad-metal:    linear-gradient(180deg, rgba(246, 245, 239, 0.04) 0%, rgba(246, 245, 239, 0.01) 100%);

  /* ---------- TYPOGRAPHIE ---------- */
  --ff-display:    "Space Grotesk", "Inter", system-ui, -apple-system, sans-serif;
  --ff-body:       "Inter", system-ui, -apple-system, sans-serif;
  --ff-mono:       "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

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

  --lh-tight:  1.05;
  --lh-snug:   1.25;
  --lh-normal: 1.5;
  --lh-loose:  1.75;

  --fw-light:    300;
  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;

  --tracking-tight:  -0.02em;
  --tracking-normal: 0;
  --tracking-wide:   0.04em;
  --tracking-mega:   0.18em;

  /* ---------- ESPACEMENTS — base 4px ---------- */
  --sp-1:   0.25rem;
  --sp-2:   0.5rem;
  --sp-3:   0.75rem;
  --sp-4:   1rem;
  --sp-5:   1.5rem;
  --sp-6:   2rem;
  --sp-7:   3rem;
  --sp-8:   4rem;
  --sp-9:   6rem;
  --sp-10:  8rem;

  /* ---------- LAYOUT ---------- */
  --container:        1280px;
  --container-narrow: 960px;
  --container-wide:   1440px;
  --gutter:           clamp(1rem, 4vw, 2.5rem);

  /* ---------- RAYONS ---------- */
  --r-sm:   6px;
  --r-md:   10px;
  --r-lg:   16px;
  --r-xl:   24px;
  --r-2xl:  32px;
  --r-pill: 999px;

  /* ---------- OMBRES ---------- */
  --sh-sm:    0 2px 8px rgba(0, 0, 0, 0.30);
  --sh-md:    0 8px 24px rgba(0, 0, 0, 0.40);
  --sh-lg:    0 24px 60px rgba(0, 0, 0, 0.55);
  /* Glow rouge feu sur CTAs principaux */
  --sh-glow-lime:   0 0 32px rgba(225, 29, 46, 0.40);
  /* Glow doré subtil sur éléments premium */
  --sh-glow-cyan:   0 0 28px rgba(212, 166, 82, 0.30);
  /* Glow acier sur info technique */
  --sh-glow-violet: 0 0 24px rgba(124, 138, 154, 0.22);

  /* ---------- MOTION ---------- */
  --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.56, 0.64, 1);

  --d-fast:   140ms;
  --d-base:   240ms;
  --d-slow:   420ms;
  --d-xslow:  720ms;

  /* ---------- Z-INDEX ---------- */
  --z-base:    1;
  --z-raised:  10;
  --z-sticky:  100;
  --z-header:  500;
  --z-overlay: 800;
  --z-modal:   900;
  --z-toast:   1000;
}

/* =========================================================
   LIGHT MODE — Palette "Atelier blanc"
   Activé via [data-theme="light"] sur <html>
   Inversion intelligente : papier/crème + accents légèrement
   plus profonds pour contraste sur fond clair.
   ========================================================= */
:root[data-theme="light"] {
  /* Bases papier / crème / chrome blanc */
  --c-bg-0:        #ecead9;   /* sable doré — footer */
  --c-bg-1:        #f7f5ec;   /* crème — fond principal */
  --c-bg-2:        #ffffff;   /* blanc pur — cards */
  --c-bg-3:        #f0ede0;   /* hover */
  --c-bg-4:        #e3dfcd;   /* surfaces très hautes / inputs */

  --c-line:        rgba(12, 12, 16, 0.10);
  --c-line-strong: rgba(12, 12, 16, 0.18);

  /* Texte — gamme anthracite / acier sombre */
  --c-fg-0:        #0c0c10;
  --c-fg-1:        #2a2a30;
  --c-fg-2:        #555550;
  --c-fg-3:        #8c8a7e;

  /* Accents (légèrement plus profonds pour contraste) */
  --c-lime:        #c41527;
  --c-lime-soft:   rgba(196, 21, 39, 0.10);
  --c-lime-deep:   #8a0e1c;
  --c-lime-glow:   rgba(196, 21, 39, 0.32);

  --c-cyan:        #b8893a;
  --c-cyan-soft:   rgba(184, 137, 58, 0.13);
  --c-cyan-deep:   #8a651f;

  --c-violet:      #5e6a78;
  --c-violet-soft: rgba(94, 106, 120, 0.10);

  /* Gradients adaptés au fond clair */
  --grad-neon:     linear-gradient(135deg, var(--c-lime) 0%, var(--c-cyan) 100%);
  --grad-violet:   linear-gradient(135deg, var(--c-cyan) 0%, var(--c-violet) 100%);
  --grad-hero:     radial-gradient(ellipse at 18% 25%, rgba(196, 21, 39, 0.10), transparent 55%),
                   radial-gradient(ellipse at 82% 70%, rgba(184, 137, 58, 0.10), transparent 55%),
                   radial-gradient(ellipse at 50% 100%, rgba(94, 106, 120, 0.06), transparent 60%);
  --grad-metal:    linear-gradient(180deg, rgba(12, 12, 16, 0.02) 0%, rgba(12, 12, 16, 0.005) 100%);

  /* Ombres — plus subtiles, légèrement teintées */
  --sh-sm:    0 2px 6px rgba(12, 12, 16, 0.06);
  --sh-md:    0 8px 22px rgba(12, 12, 16, 0.08);
  --sh-lg:    0 24px 50px rgba(12, 12, 16, 0.14);
  --sh-glow-lime:   0 0 28px rgba(196, 21, 39, 0.22);
  --sh-glow-cyan:   0 0 24px rgba(184, 137, 58, 0.20);
  --sh-glow-violet: 0 0 24px rgba(94, 106, 120, 0.15);
}

/* Réduction du motion pour utilisateurs sensibles */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}