/* ==========================================================================
   Hundeschule Gülzow – Design-Tokens
   Farbwelt abgeleitet aus dem Bollerwagen der Hundeschule (Flaschengrün)
   und dem Logo (Schokobraun #3F201D). Schriften lokal, OFL-lizenziert.
   ========================================================================== */

@font-face {
  font-family: "Literata";
  src: url("../fonts/literata-var.woff2") format("woff2");
  font-weight: 300 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Literata";
  src: url("../fonts/literata-var-italic.woff2") format("woff2");
  font-weight: 300 800;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Source Sans 3";
  src: url("../fonts/source-sans-3-var.woff2") format("woff2");
  font-weight: 300 800;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Farben */
  --c-paper: #f7f5f0;        /* Grundfläche, warmes Off-White */
  --c-sand: #ebe3d4;         /* Flächen, Bänder */
  --c-sand-deep: #d9ccb5;    /* Linien auf Sand */
  --c-green: #1f3d2c;        /* Bollerwagen-Grün, dunkel – Buttons, Bänder */
  --c-green-mid: #2f5a42;    /* Hover */
  --c-green-soft: #dfe7dc;   /* helle Grünfläche */
  --c-cocoa: #3f201d;        /* Logo-Braun – Überschriften */
  --c-ink: #2b2622;          /* Fließtext */
  --c-muted: #5c544c;        /* Nebentext (Kontrast 6.9:1 auf paper) */
  --c-ochre: #a8781f;        /* sparsamer Akzent: Linien, Marker */
  --c-on-green: #f3efe6;     /* Text auf Grün */

  /* Typografie */
  --f-serif: "Literata", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --f-sans: "Source Sans 3", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;

  --fs-small: 0.9375rem;                         /* 15px */
  --fs-body: 1.125rem;                           /* 18px */
  --fs-lead: clamp(1.1875rem, 1.05rem + 0.5vw, 1.375rem);
  --fs-h3: clamp(1.3rem, 1.15rem + 0.5vw, 1.55rem);
  --fs-h2: clamp(1.85rem, 1.4rem + 1.8vw, 2.75rem);
  --fs-h1: clamp(2.35rem, 1.6rem + 3.2vw, 4rem);
  --fs-quote: clamp(1.5rem, 1.15rem + 1.6vw, 2.35rem);

  --lh-body: 1.62;
  --lh-tight: 1.12;

  /* Abstände (8er-Raster) */
  --s-1: 0.5rem;
  --s-2: 1rem;
  --s-3: 1.5rem;
  --s-4: 2rem;
  --s-5: 3rem;
  --s-6: 4.5rem;
  --s-7: clamp(4rem, 3rem + 5vw, 7.5rem);   /* Sektionsabstand */

  /* Layout */
  --w-page: 76rem;          /* 1216px */
  --w-text: 38rem;          /* ca. 70 Zeichen */
  --gutter: clamp(1.25rem, 0.75rem + 2.5vw, 3rem);

  /* Formen */
  --r-img: 14px;
  --r-ui: 8px;
  --shadow-lift: 0 1px 2px rgba(63, 32, 29, 0.08), 0 8px 24px -12px rgba(63, 32, 29, 0.22);

  --focus: 3px solid var(--c-green);
  --t-fast: 160ms ease;
}