/* Die helle Farbtafel.
   Gemeinsam für den Kundenshop und die Rechtstextseiten — sonst laufen
   zwei Tafeln auseinander, und ein Klick auf "AGB" fällt aus dem hellen
   Shop in eine schwarze Seite. Küche und Fahreransicht bleiben dunkel
   und laden diese Datei nicht.

   Wird NACH basis.css geladen und überschreibt deren Farben. */

:root {
  color-scheme: light;

  --bg:        #FAF7F4;
  --flaeche:   #FFFFFF;
  --flaeche-2: #F5EFE9;
  --flaeche-3: #EDE1D7;
  --linie:     #E7DCD3;
  --linie-satt:#CDBBAE;
  --text:      #1F1714;
  --leise:     #6E5B51;
  --akzent:      #A8402C;
  --akzent-hell: #C25438;
  --akzent-weich:#FBEEE9;
  --auf-akzent:  #FFFFFF;
  --dunkel:    #2A1D18;
  --gut:       #2E7145;
  --gut-weich: #EAF3EC;
  --warnung:   #8A5A0C;
  --warnung-weich: #FCF3E2;

  /* Die volle Stempelkarte. --gold ist der Ton, den der Chip „noch
     4,20 €" im Warenkorb schon trägt; auf ihm braucht es dunkle
     Schrift, Weiß hätte zu wenig Kontrast. */
  --gold:       #F2B33D;
  --gold-tief:  #8A5A0C;
  --gold-weich: #FCF3E2;
  --auf-gold:   #2B1A12;

  /* Töne, die nur in Verläufen vorkommen: das Band über der Karte,
     die Füllung gewählter Kacheln, die fließende Metallkante. Eigene
     Namen und nicht aus --akzent gerechnet, weil dunkel.css --akzent
     umstellt und diese Flächen dabei bleiben sollen, wie sie sind.
     Eine Marke stellt sie in marken/<kennung>/farben.css um. */
  --band-1: #33231D;
  --band-2: #4A2A20;
  --band-3: #6B3524;
  --band-glanz: rgba(194,84,56,0.55);
  --knopf-oben:  #B44A35;
  --knopf-unten: #8E3323;
  --metall-hell:  #FBEEE9;
  --metall-licht: #F5D9CF;
  --metall-zart:  #EFC1B2;
  --metall-mitte: #C25438;
  --metall-satt:  #A8402C;
  --metall-tief:  #6B2A1C;
  --metall-nacht: #4A1E14;

  --schatten:   0 1px 2px rgba(31,23,20,0.05), 0 2px 10px rgba(31,23,20,0.045);
  --schatten-2: 0 6px 22px rgba(31,23,20,0.10);
  --schatten-3: 0 18px 46px rgba(31,23,20,0.22);

  --rand: clamp(14px, 4vw, 28px);
  --breite: 74rem;
  --kopfhoehe: 56px;
  --railhoehe: 116px;
  --rund: 16px;
}

body { background: var(--bg); }
