/* ============================================================
   German Car Specialists — shared base
   Gotham type (from Alloy DS) + automotive neutral palette.
   Each design layers its own accent + layout on top.
   ============================================================ */

@font-face{font-family:"Gotham";font-weight:300;font-style:normal;font-display:swap;
  src:url("../fonts/Gotham-Light.woff2") format("woff2");}
@font-face{font-family:"Gotham";font-weight:400;font-style:normal;font-display:swap;
  src:url("../fonts/Gotham-Book.woff2") format("woff2");}
@font-face{font-family:"Gotham";font-weight:500;font-style:normal;font-display:swap;
  src:url("../fonts/Gotham-Medium.woff2") format("woff2");}
@font-face{font-family:"Gotham";font-weight:700;font-style:normal;font-display:swap;
  src:url("../fonts/Gotham-Bold.woff2") format("woff2");}
@font-face{font-family:"Gotham";font-weight:800;font-style:normal;font-display:swap;
  src:url("../fonts/Gotham-Black.woff2") format("woff2");}
@font-face{font-family:"Gotham";font-weight:900;font-style:normal;font-display:swap;
  src:url("../fonts/Gotham-Ultra.woff2") format("woff2");}

/* JetBrains Mono for technical/spec labels */
@import url("https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600;700&display=swap");

:root{
  --font: "Gotham","Helvetica Neue",Arial,sans-serif;
  --mono: "JetBrains Mono",ui-monospace,Menlo,monospace;

  /* Automotive neutral spine (shared) */
  --ink:        #0c0e12;   /* near-black base */
  --carbon:     #14171d;
  --steel-900:  #1c2129;
  --steel-800:  #262d38;
  --steel-700:  #333c49;
  --steel-500:  #5d6776;
  --steel-400:  #7d8799;
  --steel-300:  #aab2c0;
  --fog:        #dfe3ea;   /* light borders */
  --mist:       #eef1f5;   /* light fill */
  --paper:      #f5f7fa;   /* light page bg */
  --white:      #ffffff;

  --star:       #ffb400;   /* review gold (shared) */

  /* spacing scale (4px base, from DS) */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px;
  --s6:32px; --s7:48px; --s8:64px; --s9:96px; --s10:128px;

  --r-sm:6px; --r-md:10px; --r-lg:16px; --r-xl:24px; --r-pill:999px;

  --ease: cubic-bezier(0.2,0.8,0.2,1);
  --ease-emph: cubic-bezier(0.16,1,0.3,1);
}

*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;}
body{margin:0;font-family:var(--font);font-weight:500;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
button{font-family:inherit;cursor:pointer;}
h1,h2,h3,h4,p{margin:0;}
ul{margin:0;padding:0;list-style:none;}

.mono{font-family:var(--mono);}
.container{max-width:1240px;margin:0 auto;padding:0 28px;}

/* star helper (inline svg fallback uses unicode-free spans) */
.stars{display:inline-flex;gap:2px;}
.stars svg{width:1em;height:1em;}

@media (prefers-reduced-motion: reduce){
  *{animation:none!important;transition:none!important;scroll-behavior:auto!important;}
}