/* ============================================================
   TischTap — Colors & Type
   Single-accent brand system: deep brick red on white.
   German-language B2B brand for QR/NFC tabletop stands.
   ============================================================ */

/* Poppins is a Google Fonts substitution for the deck's rounded
   geometric sans (headers) + clean body sans. Flagged to user —
   swap @font-face in fonts/ if the real licensed faces arrive. */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700;800&display=swap');

:root {
  /* ---- Brand color: the one accent ---- */
  --tt-red:          #AB1E03;   /* primary brand red (given) */
  --tt-red-bright:   #C0290A;   /* slightly brighter — large headers, fills */
  --tt-red-deep:     #8E1802;   /* pressed / darker hover */
  --tt-red-tint:     #FBEFEC;   /* faint red wash — backgrounds, hover rows */
  --tt-red-line:     #E7C9C2;   /* hairline / divider in red family */

  /* ---- Neutrals (warm-leaning) ---- */
  --tt-ink:          #2A2724;   /* primary text on light */
  --tt-ink-2:        #5E5853;   /* secondary text / captions */
  --tt-ink-3:        #948D87;   /* tertiary / placeholder */
  --tt-line:         #E4E0DC;   /* neutral hairline */
  --tt-surface:      #FFFFFF;   /* card / page surface */
  --tt-bg:           #FFFFFF;   /* page background — brand is white-led */
  --tt-bg-soft:      #FAF8F6;   /* soft off-white section */
  --tt-placeholder:  #E2DEDA;   /* image placeholder fill (deck grey) */

  /* ---- On-red ---- */
  --tt-on-red:       #FFFFFF;
  --tt-on-red-soft:  rgba(255,255,255,0.82);

  /* ---- Type families ---- */
  --tt-font-display: 'Poppins', system-ui, sans-serif; /* headers — 700/800 */
  --tt-font-body:    'Poppins', system-ui, sans-serif; /* body — 400/500 */

  /* ---- Type scale (deck is A4 print; these are screen-scaled) ---- */
  --tt-text-display: 700 64px/1.05 var(--tt-font-display);  /* page heroes "Preise" */
  --tt-text-h1:      700 44px/1.1  var(--tt-font-display);
  --tt-text-h2:      700 32px/1.15 var(--tt-font-display);
  --tt-text-h3:      600 24px/1.2  var(--tt-font-display);
  --tt-text-lead:    400 22px/1.45 var(--tt-font-body);     /* subtitles */
  --tt-text-body:    400 17px/1.55 var(--tt-font-body);
  --tt-text-sm:      400 15px/1.5  var(--tt-font-body);
  --tt-text-cap:     500 13px/1.4  var(--tt-font-body);     /* captions */
  --tt-eyebrow:      700 14px/1   var(--tt-font-display);  /* TISCHTAP tag */

  --tt-track-eyebrow: 0.14em;   /* letter-spacing for the TISCHTAP eyebrow */

  /* ---- Radii ---- */
  --tt-r-chip:   8px;    /* capsule feature labels */
  --tt-r-card:   16px;   /* outlined callout cards */
  --tt-r-img:    14px;   /* image placeholders */
  --tt-r-pill:   999px;  /* "Am beliebtesten" pill, dots */

  /* ---- Borders ---- */
  --tt-border:        1px solid var(--tt-line);
  --tt-border-red:    1.5px solid var(--tt-red);
  --tt-rule:          2px solid var(--tt-red);   /* the top/bottom page rule */

  /* ---- Shadow (used sparingly — brand is flat/print-led) ---- */
  --tt-shadow-sm: 0 1px 2px rgba(42,39,36,0.06);
  --tt-shadow-md: 0 6px 20px rgba(42,39,36,0.10);

  /* ---- Spacing scale (4px base) ---- */
  --tt-s1: 4px;  --tt-s2: 8px;  --tt-s3: 12px; --tt-s4: 16px;
  --tt-s5: 24px; --tt-s6: 32px; --tt-s7: 48px; --tt-s8: 64px;
}

/* ---- Semantic element styles ---- */
.tt-display { font: var(--tt-text-display); color: var(--tt-red); letter-spacing: -0.01em; }
.tt-h1 { font: var(--tt-text-h1); color: var(--tt-red); }
.tt-h2 { font: var(--tt-text-h2); color: var(--tt-ink); }
.tt-h3 { font: var(--tt-text-h3); color: var(--tt-ink); }
.tt-lead { font: var(--tt-text-lead); color: var(--tt-ink-2); }
.tt-body { font: var(--tt-text-body); color: var(--tt-ink); }
.tt-sm { font: var(--tt-text-sm); color: var(--tt-ink-2); }
.tt-cap { font: var(--tt-text-cap); color: var(--tt-ink-3); }
.tt-eyebrow {
  font: var(--tt-eyebrow);
  letter-spacing: var(--tt-track-eyebrow);
  color: var(--tt-red);
  text-transform: uppercase;
}