/*
 * Basis-Layer: Design-Tokens, Reset, Typografie.
 * Tokens stammen 1:1 aus Design/design_handoff_maschinenhandel_redesign/README.md.
 */

:root {
  /* Tinte & Papier */
  --ink: #1d211e;
  --ink-deep: #0c1a11;
  --ink-machine: #14251b;
  --near-black: #16181a;
  --paper: #f2efe6;
  --sky: #eef3f6;
  --winter-bg: #e8eef2;
  --white: #ffffff;

  /* Markengrün */
  --green: oklch(0.66 0.17 148);
  --green-chip: oklch(0.82 0.14 148);
  --green-scene-mid: oklch(0.62 0.15 148);
  --green-scene-light: oklch(0.72 0.13 148);
  --green-stripe: oklch(0.5 0.13 148);
  --green-link: oklch(0.52 0.15 148);
  --green-link-hover: oklch(0.4 0.13 148);
  --green-price: oklch(0.55 0.17 148);

  /* Sonne & Felgen */
  --yellow: #f7d154;
  --yellow-border: #b98a1e;
  --yellow-spoke: #d9b23a;
  --yellow-hub: #e8c34a;

  /* Holz */
  --wood: #a4713f;
  --wood-light: #b98450;
  --wood-mid: #9c6a3a;
  --wood-dark: #8a5f34;
  --bark: #6e4b28;
  --bark-deep: #5d4128;
  --wood-darkest: #4a3324;
  --end-grain: #d9ac77;

  /* Pflug */
  --plow-red-light: #e2504c;
  --plow-red: #c9302c;
  --plow-red-dark: #96231c;
  --plow-red-border: #6e1611;

  /* Text */
  --muted: #4a5049;
  --muted-2: #5c635d;
  --muted-3: #8b8e85;
  --smoke: #a7adb0;

  /* Formen */
  --radius-pill: 999px;
  --radius-card: 18px;
  --shadow-hard: 0 4px 0 var(--ink);
  --shadow-hard-sm: 0 2px 0 var(--ink);
  --shadow-hard-cta: 0 3px 0 var(--ink-deep);

  --font-display: Archivo, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --stripes: repeating-linear-gradient(135deg, #f0ede4 0px, #f0ede4 9px, #e8e4d8 9px, #e8e4d8 18px);
}

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

html,
body {
  margin: 0;
  padding: 0;
  background: var(--paper);
}

body {
  font-family: var(--font-display);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
}

::selection {
  background: var(--green);
  color: var(--ink-deep);
}

a {
  color: var(--green-link);
  text-decoration: none;
}

a:hover {
  color: var(--green-link-hover);
}

img {
  max-width: 100%;
  display: block;
}

h1,
h2,
h3 {
  text-wrap: balance;
}

p {
  text-wrap: pretty;
}

/* Selbst gehostete Schriften — kein Request an Google (DSGVO). */
@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/assets/archivo-variable-7a918f31.woff2") format("woff2-variations");
}

@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 100 800;
  font-display: swap;
  src: url("/assets/jetbrains-mono-variable-77c7bd91.woff2") format("woff2-variations");
}