/* =======================================================================
   THEMA A1 - Manufaktur
   warmes Kupfer, gestempelte Kanten, Haarlinien-Rahmen

   Ueberschreibt Token aus tokens.css und ergaenzt wenige Regeln.
   Markup und styles.css sind identisch mit Variante A.
   Einbindung: tokens.css -> DIESE DATEI -> styles.css
   ======================================================================= */

:root {
  /* ---- Farbe ---- */
  --color-primary:           #8a4a22;
  --color-primary-focus:     #a1592b;
  --color-primary-on-dark:   #e3ab7c;
  --color-gold:              #c08a3a;
  --color-gold-dim:          rgba(192,138,58,.38);
  --color-canvas-parchment:  #f4efe4;
  --color-canvas-sage:       #e7dfd1;
  --color-surface-pearl:     #faf7f0;
  --color-surface-tile-1:    #241a12;
  --color-surface-tile-2:    #2a1f15;
  --color-surface-tile-3:    #1e150e;
  --color-surface-olive:     #5a3a20;
  --color-surface-black:     #140e08;
  --color-ink:               #1e1710;
  --color-ink-muted-80:      #3a2f24;
  --color-ink-muted-48:      #7c7062;
  --color-body-muted:        #d0c2ae;
  --color-hairline:          #d6c9b3;

  /* ---- Form, Schrift, Rhythmus ---- */
  --r-xs:                    1px;
  --r-sm:                    2px;
  --r-md:                    2px;
  --r-lg:                    3px;
  --r-pill:                  3px;
  --fw-strong:               700;
  --ls-display:              -0.024em;
  --ls-caption:              0.10em;
  --shadow-product:          rgba(0, 0, 0, .30) 4px 6px 20px 0;
  --shadow-product-dark:     rgba(0, 0, 0, .62) 4px 8px 30px 0;

  /* Verlaufskette muss mitwandern, sonst laeuft der Hero in die
     Farbe der alten Sektion aus. */
  --scrim-hero: linear-gradient(to top, #241a12 0%, rgba(22,15,9,.74) 26%, rgba(22,15,9,.34) 58%, rgba(22,15,9,.14) 78%, rgba(22,15,9,.34) 100%);
  --scrim-band: linear-gradient(to top, rgba(22,15,9,.78) 0%, rgba(22,15,9,.24) 38%, rgba(22,15,9,0) 68%, rgba(22,15,9,.30) 100%);
}

/* Haarlinie um jede Kachel und jedes Bild - wirkt gesetzt, nicht schwebend */
.card, .frame { border: 1px solid var(--color-hairline); }
.is-dark .card, .is-dark .frame { border-color: var(--color-hairline-on-dark); }

/* Kategoriezeilen wie aufgestempelte Etiketten. Kommt Feinkost dazu,
   ist eine neue Warengruppe schlicht ein weiterer Stempel. */
.tile__eyebrow, .hero__eyebrow {
  text-transform: uppercase; letter-spacing: .2em; font-weight: var(--fw-strong);
}
.card__name { letter-spacing: -.012em; }