/* Generated from drafts/design-md/01-trittsteine__wein-salbei/DESIGN.md by design-draft/tokens_css.py — do not edit. */
:root {
  --surface: #ffffff;
  --surface-dim: #ddd5cc;
  --surface-bright: #ffffff;
  --surface-container-lowest: #ffffff;
  --surface-container-low: #f9f6f2;
  --surface-container: #f4f0eb;
  --surface-container-high: #ece6df;
  --surface-container-highest: #e4ddd5;
  --on-surface: #1d1411;
  --on-surface-variant: #665a53;
  --inverse-surface: #2f231e;
  --inverse-on-surface: #f6f1ea;
  --outline: #8c7f76;
  --outline-variant: #e2dad2;
  --surface-tint: #87111d;
  --primary: #87111d;
  --on-primary: #ffffff;
  --primary-container: #87111d;
  --on-primary-container: #ffffff;
  --inverse-primary: #e3a5a9;
  --secondary: #68000f;
  --on-secondary: #ffffff;
  --secondary-container: #87111d;
  --on-secondary-container: #ffffff;
  --tertiary: #58735c;
  --on-tertiary: #ffffff;
  --tertiary-container: #cceace;
  --on-tertiary-container: #07200f;
  --error: #ba1a1a;
  --on-error: #ffffff;
  --error-container: #ffdad6;
  --on-error-container: #93000a;
  --primary-fixed: #ffdad8;
  --primary-fixed-dim: #e3a5a9;
  --on-primary-fixed: #410006;
  --on-primary-fixed-variant: #8c1520;
  --secondary-fixed: #f8e9e8;
  --secondary-fixed-dim: #ffbbb8;
  --on-secondary-fixed: #410006;
  --on-secondary-fixed-variant: #8c1520;
  --tertiary-fixed: #d2f0d4;
  --tertiary-fixed-dim: #b6d4b8;
  --on-tertiary-fixed: #07200f;
  --on-tertiary-fixed-variant: #334d38;
  --background: #ffffff;
  --on-background: #1d1411;
  --surface-variant: #ece6df;
  --surface-base: #ffffff;
  --surface-muted: #eef3ee;
  --status-success: #58735c;
  --status-warning: #9e6d1c;
  --status-error: #ba1a1a;
  --text-heading: #1d1411;
  --text-body: #554741;
  --tint-stone: #f4f0eb;
  --tint-rose: #f8e9e8;
  --anchor-line: #4a3b34;
  --type-display-lg-size: 56px;
  --type-display-lg-weight: 700;
  --type-display-lg-line: 62px;
  --type-display-lg-tracking: -0.01em;
  --type-headline-lg-size: 40px;
  --type-headline-lg-weight: 700;
  --type-headline-lg-line: 46px;
  --type-headline-lg-tracking: -0.005em;
  --type-headline-md-size: 28px;
  --type-headline-md-weight: 500;
  --type-headline-md-line: 34px;
  --type-headline-sm-size: 21px;
  --type-headline-sm-weight: 700;
  --type-headline-sm-line: 28px;
  --type-body-size: 16px;
  --type-body-weight: 400;
  --type-body-line: 26px;
  --type-label-uppercase-size: 14px;
  --type-label-uppercase-weight: 600;
  --type-label-uppercase-line: 20px;
  --type-label-uppercase-tracking: 0.01em;
  --type-button-size: 17px;
  --type-button-weight: 600;
  --type-button-line: 24px;
  --type-body-lg-size: 18px;
  --type-body-lg-weight: 400;
  --type-body-lg-line: 30px;
  --type-helper-size: 14px;
  --type-helper-weight: 400;
  --type-helper-line: 20px;
  --type-numeral-size: 44px;
  --type-numeral-weight: 700;
  --type-numeral-line: 48px;
  --type-numeral-tracking: 0.01em;
  --type-quote-size: 28px;
  --type-quote-weight: 400;
  --type-quote-line: 40px;
  --type-quote-sm-size: 20px;
  --type-quote-sm-weight: 500;
  --type-quote-sm-line: 30px;
  --space-base: 8px;
  --space-xs: 8px;
  --space-sm: 16px;
  --space-md: 24px;
  --space-lg: 40px;
  --space-xl: 64px;
  --container-max: 1200px;
  --gutter: 24px;
  --space-section-gap: 112px;
  --space-section-gap-mobile: 72px;
  --space-container-narrow: 760px;
  --space-container-panel: 1296px;
  --space-card-pad: 32px;
  --space-panel-pad: 64px;
  --space-panel-pad-mobile: 28px;
  --space-margin-desktop: 40px;
  --space-margin-mobile: 20px;
  --radius-sm: 8px;
  --radius: 16px;
  --radius-md: 24px;
  --radius-lg: 32px;
  --radius-xl: 48px;
  --radius-full: 9999px;
  --radius-button: 9999px;
  --radius-input: 9999px;
  --radius-card: 28px;
  --font-heading: 'Alegreya Sans', 'Source Sans 3', system-ui, sans-serif;
  --font-body: 'Source Sans 3', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-label: 'Source Sans 3', system-ui, sans-serif;
  /* Implementation tokens */
  --font-quote: 'Alegreya', Georgia, 'Times New Roman', serif;
  --fs-h1: clamp(38px, 4.4vw, 56px);
  --fs-h2: clamp(30px, 3.2vw, 40px);
  --fs-h3: clamp(24px, 2.2vw, 28px);
  --fs-numeral: clamp(34px, 3.4vw, 44px);
  --fs-quote: clamp(22px, 2.2vw, 28px);
  --fs-lead: 18px / 30px;
  --fs-body: 16px / 26px;
  --pebble-a: 58% 42% 55% 45% / 48% 56% 44% 52%;
  --pebble-b: 44% 56% 47% 53% / 55% 45% 55% 45%;
  --pebble-c: 52% 48% 40% 60% / 46% 58% 42% 54%;
  --marker-lg: 72px × 60px;
  --marker-sm: 52px × 44px;
  --icon-box: 64px × 56px;
  --icon-box-sm: 52px × 44px;
  --pebble-offset: translate(24px, 20px) rotate(-6deg);
  --shadow-card: 0 18px 40px -20px rgba(47,35,30,0.22), 0 2px 6px rgba(47,35,30,0.05);
  --shadow-hover: 0 26px 50px -22px rgba(47,35,30,0.30), 0 3px 8px rgba(47,35,30,0.06);
  --shadow-marker: 0 10px 22px -10px rgba(47,35,30,0.28);
  --shadow-float: 0 30px 60px -24px rgba(47,35,30,0.32);
  --focus-ring: 3px solid var(--primary-container);
  --input-focus: var(--primary);
  --container-narrow: 760px;
  --container-panel: 1296px;
  --section-gap: 112px;
  --ease-soft: cubic-bezier(0.25, 0.8, 0.35, 1);
}
@media (max-width: 767px) {
  :root {
    --type-display-lg-size: 38px;
    --type-display-lg-weight: 700;
    --type-display-lg-line: 44px;
    --type-display-lg-tracking: -0.005em;
  }
}