/* ==========================================================================
   Design-Tokens des KFZ-Store

   Die eine Stelle, an der Farben, Schriftgrade, Abstände und Radien
   festgelegt werden. Jede weitere Stylesheet-Datei und jedes Template
   greift auf diese Variablen zu, statt eigene Werte zu setzen -- so bleibt
   der Shop überall gleich, und eine Änderung hier wirkt auf allen Seiten.

   Reihenfolge der Stylesheets (siehe oscar/layout.html):
     tokens.css -> fonts.css -> bootstrap/oscar -> custom.css
     -> product-card.css -> seitenspezifisch (home.css, kfz-product.css ...)
   ========================================================================== */

:root{

  /* --- Farbe -------------------------------------------------------------
     Abgeleitet aus dem Logo: das Blau der Karosserie, das Rot des Streifens,
     das Schwarzblau der Wortmarke. */

  --kfz-ink:          #16324e;   /* dunkle Flächen: Regalwand, Kontaktblock */
  --kfz-ink-soft:     #20456b;   /* aufgehellt, für Flächen darin */
  --kfz-ink-line:     #1e3f8c;   /* Aktiv-Linien, Rahmen der Kopfsuche */
  --kfz-steel:        #5a7fbf;   /* Akzent, Fokusrahmen */
  --kfz-signal:       #b8452e;   /* Suchen-Knopf, Hinweise */
  --kfz-signal-dark:  #9c3823;
  --kfz-button:       #1e4b8f;   /* Kaufen und Weiter */
  --kfz-button-dark:  #173c73;
  --kfz-link:         #0053a0;

  /* Text bleibt bewusst dunkelgrau statt blau -- besser lesbar */
  --kfz-text:         #151a21;   /* Überschriften, kräftiger Text */
  --kfz-body:         #303a46;   /* Fließtext */
  --kfz-muted:        #65707f;   /* Nebenangaben */
  --kfz-on-dark:      #ffffff;
  --kfz-on-dark-soft: #b9c4d2;   /* Fließtext auf dunkler Fläche */
  --kfz-on-dark-mute: #9fb2c9;   /* Nebenangaben auf dunkler Fläche */

  --kfz-paper:        #ffffff;
  --kfz-fog:          #f3f5f8;   /* ruhige Füllfläche: Chips, Tabellenkopf */
  --kfz-line:         #e2e7ee;   /* Rahmen und Trennlinien */
  --kfz-line-soft:    #ececec;   /* Kartenrahmen */

  /* --- Schrift -----------------------------------------------------------
     Eine Familie für den ganzen Shop (fonts.css). Die Grade sind auf Inters
     große x-Höhe abgestimmt. */

  --kfz-fs-hero:  34px;   /* Überschrift der Regalwand */
  --kfz-fs-h1:    30px;   /* Seitentitel */
  --kfz-fs-h2:    27px;   /* Abschnitte der Startseite */
  --kfz-fs-h3:    21px;   /* Abschnitte auf Unterseiten */
  --kfz-fs-h4:    17px;
  --kfz-fs-lg:    18px;   /* Fließtext hervorgehoben, Eingabefelder */
  --kfz-fs-body:  16px;
  --kfz-fs-sm:    15px;
  --kfz-fs-xs:    13.5px;
  --kfz-fs-2xs:   12.5px;

  --kfz-lh-tight: 1.15;
  --kfz-lh-head:  1.3;
  --kfz-lh-body:  1.65;

  --kfz-fw-normal: 400;
  --kfz-fw-medium: 500;
  --kfz-fw-semi:   600;
  --kfz-fw-bold:   700;

  --kfz-track-head: -.015em;  /* Überschriften laufen leicht enger */

  /* --- Abstand -----------------------------------------------------------
     Vierer-Raster; Abschnitte stehen auf --kfz-sp-9. */

  --kfz-sp-1:  4px;
  --kfz-sp-2:  8px;
  --kfz-sp-3:  12px;
  --kfz-sp-4:  16px;
  --kfz-sp-5:  20px;
  --kfz-sp-6:  26px;
  --kfz-sp-7:  32px;
  --kfz-sp-8:  44px;
  --kfz-sp-9:  56px;

  /* --- Form --------------------------------------------------------------- */

  --kfz-r-sm:   8px;
  --kfz-r-md:   10px;
  --kfz-r-lg:   14px;
  --kfz-r-xl:   16px;
  --kfz-r-pill: 999px;

  --kfz-control-h:    50px;   /* Eingabefelder und Knöpfe */
  --kfz-control-h-lg: 56px;

  --kfz-focus: 0 0 0 3px rgba(90, 127, 191, .35);

  /* --- Layout -------------------------------------------------------------- */

  --kfz-container: 1270px;
  --kfz-measure:   68ch;      /* Lesebreite für Fließtext */
}