/* ==========================================================================
   Mr. Bed — Design Tokens (Phase 4)
   Alle Farbkontraste rechnerisch WCAG-AA-geprüft (siehe projekt.md Abschnitt 11).
   ========================================================================== */

/* --- Self-hosted variable fonts (DSGVO-konform, keine externen Calls) ----- */
@font-face {
  font-family: "Bricolage Grotesque";
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url("../fonts/bricolage-grotesque-wght.woff2") format("woff2");
}
@font-face {
  font-family: "InterVar";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/inter-wght.woff2") format("woff2");
}

:root {
  /* --- Farben ----------------------------------------------------------- */
  --c-green: #2F5D50;        /* Primär: Buttons, Links, Akzent-Vordergrund */
  --c-green-dark: #1E3D34;   /* Header/Footer-Tiefe, Headlines auf Sand */
  --c-green-deep: #152C25;   /* extra Tiefe für Footer-Verlauf */
  --c-sand: #F5F0E6;         /* warmer Seitenhintergrund */
  --c-surface: #FBFAF7;      /* Flächen/Cards */
  --c-white: #FFFFFF;
  --c-amber: #C8852A;        /* nur gefüllte Akzentfläche + dunkler Text */
  --c-amber-soft: #F0DFC2;   /* helle Amber-Wäsche für Flächen */
  --c-ink: #23262B;          /* Fließtext, Text auf Amber */
  --c-ink-2: #5C6168;        /* Sekundärtext */
  --c-line: #E4DCCB;         /* dezente Trennlinien auf Sand */
  --c-line-soft: #EFE9DC;

  /* --- Typografie ------------------------------------------------------- */
  --f-display: "Bricolage Grotesque", "Fraunces", Georgia, serif;
  --f-body: "InterVar", system-ui, -apple-system, "Segoe UI", sans-serif;

  --fs-base: 1.0625rem;       /* 17px */
  --lh-body: 1.62;
  --lh-tight: 1.14;

  --fs-h1: clamp(2.25rem, 1.6rem + 2.8vw, 3.5rem);
  --fs-h2: clamp(1.75rem, 1.35rem + 1.8vw, 2.5rem);
  --fs-h3: 1.5rem;
  --fs-h4: 1.25rem;
  --fs-eyebrow: 0.78rem;
  --fs-small: 0.875rem;

  /* --- Spacing (4px-Basis) --------------------------------------------- */
  --s-1: 0.25rem;  --s-2: 0.5rem;  --s-3: 0.75rem; --s-4: 1rem;
  --s-5: 1.5rem;   --s-6: 2rem;    --s-7: 3rem;    --s-8: 4rem;
  --s-9: 6rem;     --s-10: 8rem;

  /* --- Radien ----------------------------------------------------------- */
  --r-sm: 6px; --r-md: 10px; --r-lg: 16px; --r-xl: 24px; --r-pill: 999px;

  /* --- Schatten (warm getönt) ------------------------------------------ */
  --sh-1: 0 1px 2px rgba(30, 61, 52, 0.06);
  --sh-2: 0 4px 16px rgba(30, 61, 52, 0.08);
  --sh-3: 0 14px 38px rgba(30, 61, 52, 0.13);

  /* --- Layout ----------------------------------------------------------- */
  --container: 1200px;
  --measure: 68ch;

  /* --- Bewegung --------------------------------------------------------- */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --dur: 200ms;
}