/* ============================================================
   The Dynamic Drive — Colors & Type tokens
   Automotive consignment / dealership · French-language brand
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Allura&family=Inter:wght@300;400;500;600;700;800&family=JetBrains+Mono:wght@400;600&display=swap');

:root {
  /* ---------- BRAND CORE ---------- */
  --tdd-onyx:        #0B0B0B;   /* primary background — true near-black */
  --tdd-asphalt:     #161616;   /* surface 1 */
  --tdd-graphite:    #1F1F1F;   /* surface 2 / cards */
  --tdd-iron:        #2A2A2A;   /* surface 3 / hover */
  --tdd-steel:       #3A3A3A;   /* borders / dividers */

  --tdd-gold:        #E8B23A;   /* signature gold — needle, accents */
  --tdd-gold-bright: #F2C75A;   /* hover / highlight */
  --tdd-gold-deep:   #B8881C;   /* pressed / shadow */
  --tdd-gold-50:     #FBF1D7;   /* tint for highlights on dark */

  --tdd-chrome:      #C9C9C9;   /* silver blades */
  --tdd-chrome-mid:  #9E9E9E;
  --tdd-chrome-low:  #6F6F6F;

  --tdd-bone:        #F4EFE6;   /* warm off-white */
  --tdd-paper:       #FAF7F1;   /* light bg */

  /* ---------- SEMANTIC ---------- */
  --tdd-success:     #4FB373;   /* "Disponible" / In stock */
  --tdd-warning:     #E8B23A;   /* uses gold */
  --tdd-danger:      #C84B3B;   /* "Vendu" / sold-out emphasis */
  --tdd-info:        #5B8FB9;

  /* ---------- FOREGROUND on dark ---------- */
  --tdd-fg-1:  #FAF7F1;         /* primary text on dark */
  --tdd-fg-2: rgba(250,247,241,.78);
  --tdd-fg-3: rgba(250,247,241,.56);
  --tdd-fg-4: rgba(250,247,241,.36);

  /* ---------- FOREGROUND on light ---------- */
  --tdd-ink-1: #0B0B0B;
  --tdd-ink-2: #2A2A2A;
  --tdd-ink-3: #5A5A5A;
  --tdd-ink-4: #8B8B8B;

  /* ---------- TYPE FAMILIES ---------- */
  --tdd-font-display: 'Bebas Neue', 'Oswald', 'Impact', sans-serif;     /* the "DYNAMIC DRIVE" wordmark feel */
  --tdd-font-script:  'Allura', 'Pinyon Script', cursive;               /* the "The" script */
  --tdd-font-body:    'Inter', 'Helvetica Neue', system-ui, sans-serif;
  --tdd-font-mono:    'JetBrains Mono', ui-monospace, monospace;

  /* ---------- TYPE SCALE (px-based, 16 base) ---------- */
  --tdd-fs-display-xl: clamp(56px, 9vw, 144px);
  --tdd-fs-display-l:  clamp(40px, 6vw, 88px);
  --tdd-fs-display-m:  clamp(32px, 4.5vw, 64px);
  --tdd-fs-h1: 48px;
  --tdd-fs-h2: 36px;
  --tdd-fs-h3: 28px;
  --tdd-fs-h4: 22px;
  --tdd-fs-h5: 18px;
  --tdd-fs-body-l: 18px;
  --tdd-fs-body:   16px;
  --tdd-fs-body-s: 14px;
  --tdd-fs-caption: 12px;
  --tdd-fs-eyebrow: 12px; /* uppercase, tracked */

  /* ---------- TRACKING ---------- */
  --tdd-tracking-display: 0.04em;   /* DYNAMIC DRIVE has open spacing */
  --tdd-tracking-eyebrow: 0.22em;   /* ACHAT · VENTE · DÉPÔT */
  --tdd-tracking-tight:   -0.01em;
  --tdd-tracking-normal:  0;

  /* ---------- LINE HEIGHT ---------- */
  --tdd-lh-display: 1.0;
  --tdd-lh-heading: 1.15;
  --tdd-lh-body:    1.55;

  /* ---------- RADIUS (sharp brand — small radii) ---------- */
  --tdd-r-0: 0px;
  --tdd-r-1: 2px;
  --tdd-r-2: 4px;
  --tdd-r-3: 8px;
  --tdd-r-4: 12px;
  --tdd-r-pill: 999px;

  /* ---------- SPACING (4px base) ---------- */
  --tdd-s-1: 4px;
  --tdd-s-2: 8px;
  --tdd-s-3: 12px;
  --tdd-s-4: 16px;
  --tdd-s-5: 24px;
  --tdd-s-6: 32px;
  --tdd-s-7: 48px;
  --tdd-s-8: 64px;
  --tdd-s-9: 96px;
  --tdd-s-10: 128px;

  /* ---------- BORDERS ---------- */
  --tdd-border-hairline: 1px solid var(--tdd-steel);
  --tdd-border-soft:     1px solid rgba(250,247,241,.10);
  --tdd-border-gold:     1px solid var(--tdd-gold);

  /* ---------- SHADOWS ---------- */
  --tdd-shadow-sm: 0 1px 2px rgba(0,0,0,.4);
  --tdd-shadow-md: 0 8px 24px rgba(0,0,0,.45);
  --tdd-shadow-lg: 0 24px 60px rgba(0,0,0,.55);
  --tdd-shadow-gold: 0 8px 24px rgba(232,178,58,.25);
  --tdd-shadow-inset: inset 0 1px 0 rgba(255,255,255,.04);

  /* ---------- MOTION ---------- */
  --tdd-ease-standard: cubic-bezier(.2,.8,.2,1);
  --tdd-ease-out:      cubic-bezier(.16,1,.3,1);
  --tdd-ease-in:       cubic-bezier(.7,0,.84,0);
  --tdd-dur-fast:   140ms;
  --tdd-dur-base:   220ms;
  --tdd-dur-slow:   420ms;

  /* ---------- LAYOUT ---------- */
  --tdd-content-max: 1280px;
  --tdd-gutter: clamp(16px, 4vw, 48px);
}

/* ============================================================
   SEMANTIC TYPE STYLES — apply via class
   ============================================================ */

.tdd-display-xl,
.tdd-display-l,
.tdd-display-m {
  font-family: var(--tdd-font-display);
  font-weight: 400;
  letter-spacing: var(--tdd-tracking-display);
  line-height: var(--tdd-lh-display);
  text-transform: uppercase;
  color: var(--tdd-fg-1);
}
.tdd-display-xl { font-size: var(--tdd-fs-display-xl); }
.tdd-display-l  { font-size: var(--tdd-fs-display-l); }
.tdd-display-m  { font-size: var(--tdd-fs-display-m); }

.tdd-script {
  font-family: var(--tdd-font-script);
  font-weight: 400;
  color: var(--tdd-gold);
  line-height: 0.9;
}

.tdd-h1, .tdd-h2, .tdd-h3, .tdd-h4, .tdd-h5 {
  font-family: var(--tdd-font-display);
  font-weight: 400;
  letter-spacing: var(--tdd-tracking-display);
  line-height: var(--tdd-lh-heading);
  text-transform: uppercase;
  color: var(--tdd-fg-1);
}
.tdd-h1 { font-size: var(--tdd-fs-h1); }
.tdd-h2 { font-size: var(--tdd-fs-h2); }
.tdd-h3 { font-size: var(--tdd-fs-h3); }
.tdd-h4 { font-size: var(--tdd-fs-h4); }
.tdd-h5 { font-size: var(--tdd-fs-h5); }

.tdd-eyebrow {
  font-family: var(--tdd-font-body);
  font-weight: 600;
  font-size: var(--tdd-fs-eyebrow);
  letter-spacing: var(--tdd-tracking-eyebrow);
  text-transform: uppercase;
  color: var(--tdd-gold);
}

.tdd-body-l { font: 400 var(--tdd-fs-body-l)/var(--tdd-lh-body) var(--tdd-font-body); color: var(--tdd-fg-1); }
.tdd-body   { font: 400 var(--tdd-fs-body)/var(--tdd-lh-body)   var(--tdd-font-body); color: var(--tdd-fg-2); }
.tdd-body-s { font: 400 var(--tdd-fs-body-s)/var(--tdd-lh-body) var(--tdd-font-body); color: var(--tdd-fg-2); }
.tdd-caption{ font: 500 var(--tdd-fs-caption)/1.4 var(--tdd-font-body); color: var(--tdd-fg-3); letter-spacing: 0.04em; }
.tdd-mono   { font: 400 14px/1.5 var(--tdd-font-mono); color: var(--tdd-fg-2); }

.tdd-num {
  font-family: var(--tdd-font-display);
  font-feature-settings: "tnum";
  letter-spacing: 0;
}

/* ============================================================
   SURFACES
   ============================================================ */
.tdd-surface-onyx     { background: var(--tdd-onyx);     color: var(--tdd-fg-1); }
.tdd-surface-asphalt  { background: var(--tdd-asphalt);  color: var(--tdd-fg-1); }
.tdd-surface-graphite { background: var(--tdd-graphite); color: var(--tdd-fg-1); }
.tdd-surface-paper    { background: var(--tdd-paper);    color: var(--tdd-ink-1); }
.tdd-surface-bone     { background: var(--tdd-bone);     color: var(--tdd-ink-1); }

/* Subtle carbon-fiber / brushed-metal background pattern */
.tdd-bg-carbon {
  background-color: var(--tdd-onyx);
  background-image:
    repeating-linear-gradient(45deg, rgba(255,255,255,.012) 0 2px, transparent 2px 4px),
    repeating-linear-gradient(-45deg, rgba(255,255,255,.012) 0 2px, transparent 2px 4px);
}
.tdd-bg-vignette {
  background:
    radial-gradient(ellipse at 50% 0%, rgba(232,178,58,.06), transparent 50%),
    var(--tdd-onyx);
}