/* Wolf Marketing – Design-Tokens
 *
 * Übernommen aus dem Design System (tokens/*.css), inhaltlich unverändert.
 * Diese Datei ist bewusst die einzige Stelle mit Marken-Werten: Wird das
 * Design System neu erzeugt, wird hier komplett ersetzt und sonst nichts.
 * Einzige Anpassung gegenüber dem Original: die Schriftpfade zeigen auf
 * "fonts/" statt auf "../assets/fonts/".
 *
 * Das Werkzeug selbst nutzt ausschließlich die Rollen-Tokens weiter unten
 * (--brand-*, --text-*, --surface-*, --border-*), nicht die Farbstufen direkt.
 */

/* ------------------------------------------------------------------ Schriften */

@font-face{
  font-family:"Bespoke Sans";
  src:url("fonts/BespokeSans-Variable.woff2") format("woff2"),
      url("fonts/BespokeSans-Variable.woff") format("woff");
  font-weight:300 800;font-style:normal;font-display:swap;
}
@font-face{
  font-family:"Synonym";
  src:url("fonts/Synonym-Variable.woff2") format("woff2"),
      url("fonts/Synonym-Variable.woff") format("woff");
  font-weight:300 700;font-style:normal;font-display:swap;
}

/* -------------------------------------------------------------------- Farben */

:root{
  --wm-green-900:#2f4600; --wm-green-800:#456700; --wm-green-700:#5c8a00;
  --wm-green-600:#6da200; --wm-green-500:#7db900; --wm-green-400:#96cf2e;
  --wm-green-300:#b4e065; --wm-green-200:#d5efa6; --wm-green-100:#ebf7d8;
  --wm-green-050:#f5fbee;

  --wm-blue-900:#001c3d; --wm-blue-800:#002a5c; --wm-blue-700:#003573;
  --wm-blue-600:#00408b; --wm-blue-500:#1155a6; --wm-blue-400:#3d7cc4;
  --wm-blue-300:#7ba7db; --wm-blue-200:#b6cdec; --wm-blue-100:#dde8f6;
  --wm-blue-050:#eef4fb;

  --wm-ink-900:#101410; --wm-ink-800:#1c211c; --wm-ink-700:#2b312b;
  --wm-ink-600:#454c45; --wm-ink-500:#646b64; --wm-ink-400:#8b918b;
  --wm-ink-300:#b7bcb7; --wm-ink-200:#dcdfdc; --wm-ink-100:#eef0ee;
  --wm-ink-050:#f7f8f7; --wm-white:#ffffff;

  --wm-success:#7db900; --wm-warning:#e8a300; --wm-danger:#cf3535; --wm-info:#00408b;

  --brand-primary:var(--wm-green-500);
  --brand-primary-hover:var(--wm-green-600);
  --brand-primary-active:var(--wm-green-700);
  --brand-secondary:var(--wm-blue-600);
  --brand-secondary-hover:var(--wm-blue-700);
  --brand-on-primary:var(--wm-white);

  --text-heading:var(--wm-ink-900); --text-body:var(--wm-ink-700);
  --text-muted:var(--wm-ink-500);   --text-inverse:var(--wm-white);
  --text-accent:var(--wm-green-600);
  --text-link:var(--wm-blue-600);   --text-link-hover:var(--wm-green-600);

  --surface-page:var(--wm-white);   --surface-subtle:var(--wm-ink-050);
  --surface-card:var(--wm-white);   --surface-accent:var(--wm-green-500);
  --surface-accent-soft:var(--wm-green-100);
  --surface-dark:var(--wm-ink-800); --surface-blue-soft:var(--wm-blue-100);

  --border-subtle:var(--wm-ink-200); --border-strong:var(--wm-ink-300);
  --border-accent:var(--wm-green-500);
  --focus-ring:var(--wm-blue-600);
}

/* ----------------------------------------------------------------- Typografie */

:root{
  --font-display:"Bespoke Sans","Poppins",system-ui,sans-serif;
  --font-body:"Synonym","Inter",system-ui,sans-serif;
  --font-mono:ui-monospace,"SFMono-Regular",Menlo,Consolas,monospace;

  --fw-light:300; --fw-regular:400; --fw-medium:500;
  --fw-semibold:600; --fw-bold:700; --fw-extrabold:800;

  --fs-display:clamp(2.5rem,4.5vw,3.75rem);
  --fs-h1:clamp(2rem,3.4vw,3rem);
  --fs-h2:clamp(1.625rem,2.6vw,2.25rem);
  --fs-h3:1.5rem; --fs-h4:1.25rem; --fs-lead:1.1875rem;
  --fs-body:1rem; --fs-sm:0.9375rem; --fs-xs:0.8125rem; --fs-eyebrow:0.8125rem;

  --lh-tight:1.08; --lh-heading:1.18; --lh-snug:1.4; --lh-body:1.65;
  --ls-display:-0.02em; --ls-heading:-0.01em; --ls-body:0; --ls-eyebrow:0.08em;
}

/* --------------------------------------------------------- Maße und Abstände */

:root{
  --space-1:4px;  --space-2:8px;  --space-3:12px; --space-4:16px; --space-5:24px;
  --space-6:32px; --space-7:40px; --space-8:56px; --space-9:72px; --space-10:96px;
  --space-11:128px;

  --section-y:var(--space-10); --card-pad:var(--space-5);
  --gutter:var(--space-5); --container-max:1200px; --container-narrow:760px;

  --radius-xs:4px; --radius-sm:6px; --radius-md:10px; --radius-lg:16px;
  --radius-xl:24px; --radius-pill:999px;
  --radius-card:var(--radius-md); --radius-button:var(--radius-pill);
}

/* -------------------------------------------------------- Schatten, Bewegung */

:root{
  --shadow-xs:0 1px 2px rgba(16,20,16,.06);
  --shadow-sm:0 2px 6px rgba(16,20,16,.07);
  --shadow-md:0 6px 18px rgba(16,20,16,.09);
  --shadow-lg:0 14px 40px rgba(16,20,16,.12);
  --shadow-accent:0 8px 22px rgba(125,185,0,.28);
  --shadow-card:var(--shadow-sm); --shadow-card-hover:var(--shadow-md);

  --ease-standard:cubic-bezier(.4,0,.2,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
  --dur-fast:120ms; --dur-base:200ms; --dur-slow:400ms; --dur-reveal:700ms;
}