/* Fischer Vending – Design Tokens
   AUTOMATISCH ERZEUGT aus tokens.json mit build-tokens.py. Nicht von Hand ändern. */

@font-face { font-family: "Montserrat"; font-weight: 400; font-style: normal; font-display: swap; src: url("assets/fonts/montserrat-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Montserrat"; font-weight: 600; font-style: normal; font-display: swap; src: url("assets/fonts/montserrat-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Montserrat"; font-weight: 700; font-style: normal; font-display: swap; src: url("assets/fonts/montserrat-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family: "Montserrat"; font-weight: 800; font-style: normal; font-display: swap; src: url("assets/fonts/montserrat-latin-800-normal.woff2") format("woff2"); }

:root {
  --surface-cream: #fff7e0;
  --surface-white: #ffffff;
  --ink: #1e1226;
  --ink-muted: #62575e;
  --petrol: #1e3a4a;
  --on-dark-muted: #cecdbf;
  --amber: #f5a623;
  --amber-hover: #e0921a;
  --ember: #d9421c;
  --orange-logo: #f2762e;
  --error: #b3261e;
  --error-bg: #fdecea;
  --success: #1d6e45;
  --success-bg: #e7f4ec;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;
  --space-12: 48px;
  --space-16: 64px;
  --space-24: 96px;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 16px;
  --border-ink: 2px solid #1e1226;
  --border-subtle: 1px solid #e8dfc8;
  --container-max: 1200px;
  --gutter: 64px;
  --font: "Montserrat", system-ui, sans-serif;
}

@media (max-width: 1100px) { :root { --gutter: 32px; } }
@media (max-width: 760px) { :root { --gutter: 20px; } }

/* Textklassen */
.display { font-family: var(--font); font-size: 56px; line-height: 60px; font-weight: 800; }
.h1 { font-family: var(--font); font-size: 40px; line-height: 44px; font-weight: 800; }
.h2 { font-family: var(--font); font-size: 28px; line-height: 34px; font-weight: 700; }
.h3 { font-family: var(--font); font-size: 22px; line-height: 28px; font-weight: 700; }
.lead { font-family: var(--font); font-size: 20px; line-height: 30px; font-weight: 400; }
.body { font-family: var(--font); font-size: 16px; line-height: 24px; font-weight: 400; }
.small { font-family: var(--font); font-size: 14px; line-height: 20px; font-weight: 400; }
.label { font-family: var(--font); font-size: 13px; line-height: 16px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; }
.lead { max-width: 600px; }

@media (max-width: 760px) {
  .display { font-size: 34px; line-height: 38px; }
  .h1 { font-size: 30px; line-height: 34px; }
  .h2 { font-size: 24px; line-height: 30px; }
  .h3 { font-size: 20px; line-height: 26px; }
  .lead { font-size: 17px; line-height: 26px; }
}

/* Fokus */
:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }
.on-dark :focus-visible { outline-color: var(--amber); }