/* ==========================================================================
   CAESAR AUTO — design-system.css
   The complete token set. Every value used anywhere on the site comes from
   here — main.css and rtl.css must not introduce new magic numbers.
   Direction: "Précision Industrielle" (approved homepage direction A).
   ========================================================================== */

:root {
  /* ---- type families (self-hosted, see assets/fonts/fonts.css) ---- */
  --font-display: 'Big Shoulders', sans-serif;
  --font-body: 'Work Sans', sans-serif;
  --font-mono: 'JetBrains Mono', monospace;
  --font-arabic: 'Cairo', sans-serif; /* wired in during the RTL pass (step 3e) */

  /* ---- brand palette — see the colour-discipline rules in README.md ---- */
  --ink: #050505;      /* page background; matches the logo ground */
  --ink-2: #101012;    /* raised surfaces, cards */
  --ink-3: #17181b;    /* placeholder media wells */
  --caesar-red: #E63329;   /* ACTION only: primary buttons, active filter, price, WhatsApp CTA */
  --caesar-green: #7DD05A; /* STATUS only: "En stock", "Nouveau", counters, completed steps */
  --chrome: #C9CDD2;   /* hairlines, rules, small caps */
  --chrome-hi: #F2F4F6;/* chrome gradient highlight, icon fills */
  --paper: #FAFAF8;    /* body text on dark */
  --chrome-line: linear-gradient(90deg, transparent, var(--chrome) 20%, var(--chrome-hi) 50%, var(--chrome) 80%, transparent);

  /* ---- spacing scale (8px rhythm) ---- */
  --sp-1: .4rem;   /* 6.4px */
  --sp-2: .8rem;   /* 12.8px */
  --sp-3: 1.2rem;  /* 19.2px */
  --sp-4: 1.6rem;  /* 25.6px */
  --sp-5: 2.4rem;  /* 38.4px */
  --sp-6: 3.2rem;  /* 51.2px */
  --sp-7: 4.8rem;  /* 76.8px */
  --sp-8: 6.4rem;  /* 102.4px */
  --sp-9: 9.6rem;  /* 153.6px */

  /* ---- radii — flat/sharp by design; automotive premium, not app-soft ---- */
  --radius: 0px;

  /* ---- motion ---- */
  --ease: cubic-bezier(.22, .61, .36, 1);
  --dur-fast: 150ms;
  --dur-base: 300ms;
  --dur-slow: 500ms;

  /* ---- type scale ---- */
  --text-h1: clamp(2.6rem, 4vw + 1.6rem, 6.2rem);
  --text-h2: clamp(1.9rem, 2.4vw + 1.1rem, 3.2rem);
  --text-h3: clamp(1.2rem, 1vw + .9rem, 1.6rem);
  --measure: 62ch;

  /* ---- layout ---- */
  --container-max: 1400px;

  color-scheme: dark;
}

/* ---- reset ---- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
html, body { max-width: 100%; overflow-x: hidden; }
body {
  margin: 0;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img, picture, video { max-width: 100%; display: block; }
a { color: inherit; }
button { font-family: inherit; }

/* ---- accessibility primitives ----
   Off-screen hiding uses a vertical transform, never a large negative
   left/right offset: a huge physical -9999px offset combined with
   dir="rtl" is enough to break Chromium's paint for the entire page in
   this stack (verified independently via two separate automation paths).
   A transform-based vertical hide is also inherently direction-safe. */
.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  overflow: hidden; clip-path: inset(50%);
}
.skip-link {
  position: absolute; inset-inline-start: var(--sp-3); top: 0; z-index: 1000;
  background: var(--paper); color: var(--ink);
  padding: .75rem 1.25rem; font-weight: 600;
  transform: translateY(-200%);
  transition: transform var(--dur-base) var(--ease);
}
.skip-link:focus { transform: translateY(var(--sp-3)); }

:focus-visible {
  outline: 2px solid var(--caesar-red);
  outline-offset: 2px;
}

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

/* ---- shared utility classes (token-driven, no magic numbers) ---- */
.u-mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; letter-spacing: .02em; }
.u-caps { text-transform: uppercase; letter-spacing: .14em; }
.container { max-width: var(--container-max); margin-inline: auto; padding-inline: var(--sp-5); }
@media (max-width: 640px) { .container { padding-inline: var(--sp-4); } }