/* ============================================================
   Finger Marketing Services — Base & element defaults
   Light reset + document defaults + product-shade helpers.
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--text-body-size);
  line-height: var(--leading-body);
  font-weight: var(--weight-regular);
  color: var(--text-body);
  background: var(--surface-page);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6 {
  margin: 0;
  font-family: var(--font-heading);
  color: var(--heading-color);
  line-height: var(--leading-snug);
  text-wrap: balance;
}

h1 { font-size: var(--text-h1); font-weight: var(--weight-bold); line-height: var(--leading-tight); letter-spacing: var(--tracking-tight); }
h2 { font-size: var(--text-h2); font-weight: var(--weight-bold); letter-spacing: var(--tracking-tight); }
h3 { font-size: var(--text-h3); font-weight: var(--weight-medium); }

p { margin: 0 0 1em; text-wrap: pretty; }

a {
  color: var(--text-link);
  text-decoration: none;
  transition: color var(--duration-fast) var(--ease-standard);
}
a:hover { color: var(--text-link-hover); }

small { font-size: var(--text-small); }

:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
  border-radius: var(--radius-sm);
}

/* --- Layout helper --- */
.fms-container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}

/* ------------------------------------------------------------
   Product-shade helpers. Setting one of these on a wrapper
   rebinds --accent and its verified text color --on-accent so
   nested components (buttons, badges, tags) pick up the right
   product color + WCAG-correct text automatically.
   ------------------------------------------------------------ */
[data-product="wahlunterlagen"]   { --accent: var(--lettershop-1);  --on-accent: var(--on-lettershop-1); }
[data-product="haendlermailing"]  { --accent: var(--lettershop-2);  --on-accent: var(--on-lettershop-2); }
[data-product="dokumentenstrom"]  { --accent: var(--lettershop-3);  --on-accent: var(--on-lettershop-3); }
[data-product="anlasspakete"]     { --accent: var(--konfekt-1);     --on-accent: var(--on-konfekt-1); }
[data-product="pos-pakete"]       { --accent: var(--konfekt-2);     --on-accent: var(--on-konfekt-2); }
[data-product="handveredelung"]   { --accent: var(--konfekt-3);     --on-accent: var(--on-konfekt-3); }
[data-product="bestellportal"]    { --accent: var(--fulfillment-1); --on-accent: var(--on-fulfillment-1); }
[data-product="werbemittel"]      { --accent: var(--fulfillment-2); --on-accent: var(--on-fulfillment-2); }

/* Area anchors (used on overview/section pages) */
[data-area="lettershop"]      { --accent: var(--lettershop-2);  --on-accent: var(--on-lettershop-2); }
[data-area="konfektionierung"]{ --accent: var(--konfekt-2);     --on-accent: var(--on-konfekt-2); }
[data-area="fulfillment"]     { --accent: var(--fulfillment-1); --on-accent: var(--on-fulfillment-1); }

/* Default --on-accent when no product scope is set (brand blue → white) */
:root { --on-accent: var(--neutral-white); }