/* Design-Tokens Schütt Shop. Breakpoints: 640px (sm), 900px (md), 1200px (lg) */
@font-face { font-family: "Roboto"; font-weight: 300; font-display: swap; src: url("../fonts/roboto-v20-latin-300.woff2") format("woff2"); }
@font-face { font-family: "Roboto"; font-weight: 400; font-display: swap; src: url("../fonts/roboto-v20-latin-regular.woff2") format("woff2"); }
@font-face { font-family: "Roboto"; font-weight: 500; font-display: swap; src: url("../fonts/roboto-v20-latin-500.woff2") format("woff2"); }
@font-face { font-family: "Roboto"; font-weight: 700; font-display: swap; src: url("../fonts/roboto-v20-latin-700.woff2") format("woff2"); }
@font-face { font-family: "Roboto"; font-weight: 900; font-display: swap; src: url("../fonts/roboto-v20-latin-900.woff2") format("woff2"); }

:root {
  --color-brand: #e2001a;
  --color-brand-dark: #b80015;
  --color-text: #1a1a1a;
  --color-muted: #595959;
  --color-surface: #f1f1f1;
  --color-surface-2: #e6e6e6;
  --color-border: #dcdcdc;
  --color-white: #fff;
  --color-footer: #111;

  --font-base: "Roboto", Arial, sans-serif;

  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4.5rem;

  --container: 1200px;
  --gutter: 1rem;
  --cut: 14px; /* abgeschrägte Ecke bei Buttons/Tabs */
  --shadow-card: 0 1px 3px rgb(0 0 0 / 8%);
  --shadow-card-hover: 0 6px 18px rgb(0 0 0 / 14%);
  --focus: 3px solid #005fcc;
}

:root {
  --font-spec: ui-monospace, "Cascadia Mono", Consolas, "Liberation Mono", monospace;
  --color-brand-tint: #fdecee;
  --radius-pill: 999px;
}

:root {
  --color-border-strong: #b5b5b5;
  --color-subtle: #9a9a9a;
  --color-grid: #ededed;
  --color-zebra: #fafafa;
  --color-thread: #c9c9c9;
  --color-on-dark: #e8e8e8;
  --color-on-dark-2: #cfcfcf;
  --color-on-dark-3: #a8a8a8;
  --color-footer-line: #2c2c2c;
}