/* ============================================
   Design Tokens — Pension Ehrenfried
   Extracted from style.css (Mode 2 migration)
   ============================================ */

:root {
  /* --- Colors (exact hex from style.css :root) --- */
  --primary: #5B7C4F;              /* was --color-primary */
  --primary-light: #7A9B6E;        /* was --color-primary-light */
  --primary-dark: #465F3D;         /* was --color-primary-dark */
  --secondary: #C8973E;            /* was --color-secondary */
  --secondary-light: #D4A84B;      /* was --color-secondary-light */
  --accent: #C06B3E;               /* was --color-accent */
  --accent-light: #D4835A;         /* was --color-accent-light */
  --booking: #93A839;              /* Logo-Farbe — exklusiv für Buchungs-CTAs */
  --booking-hover: #7F9530;        /* Hover-Variante der Logo-Farbe */
  --color-dark: #1B3A2A;           /* was --color-dark */
  --color-dark-warm: #2A4A38;      /* was --color-dark-warm */
  --text: #2C3E34;                 /* was --color-text */
  --text-muted: #5A6E62;           /* was --color-text-light */
  --bg: #F7FAF7;                   /* was --color-bg */
  --color-cream: #EFF4ED;          /* was --color-cream */
  --border-color: #D4E0D8;         /* was --color-border — used in --border shorthand and standalone */

  /* --- Contextual assignments --- */
  --bg-light: var(--color-cream);
  --bg-dark: var(--color-dark);
  --bg-ultra-dark: var(--color-dark);
  --text-light: #ffffff;
  --text-light-muted: rgba(239, 244, 237, 0.7);   /* from footer .footer__brand p, .footer__links a color */
  --text-dark-muted: var(--text-muted);

  /* --- Base font size — fluid LESE-Text (Utopia-Range 390px → 3840px) ---
     Min = Handy (unverändert), Laptop ≈20px@1280, wächst bis 30px und cappt
     erst bei ~3840px → deutlich größer auf großen/4K-Viewports (auch bei 100% Skalierung). */
  --base-font-size: clamp(1.0625rem, 0.971rem + 0.377vw, 1.875rem);   /* 17px → 30px (bis 3840px) */

  /* --- Überschriften: fluid bis 1600px (64px sind auf 4K bereits groß genug) --- */
  --h1: clamp(2rem, 1.355rem + 2.645vw, 4rem);     /* 32px → 64px */
  --h2: clamp(1.6rem, 1.229rem + 1.521vw, 2.75rem); /* 25.6px → 44px */
  --h3: clamp(1.2rem, 1.023rem + 0.727vw, 1.75rem); /* 19.2px → 28px */
  --h4: clamp(1.15rem, 1.096rem + 0.22vw, 1.625rem); /* 18.4px → 26px (bis 3840px) */
  --text-xxl: 1.6rem;                                /* from .feature-card__icon font-size */
  --text-xl: clamp(1.2rem, 1.096rem + 0.429vw, 2.125rem);  /* Hero-Unterzeile: 19.2px → 34px (bis 3840px) */
  --text-l: clamp(1.1rem, 1.027rem + 0.301vw, 1.75rem);    /* Intro-Text: 17.6px → 28px (bis 3840px) */
  --text-m: 0.95rem;                                 /* from .btn, form inputs, .checklist li, .contact-item__text font-size */
  --text-s: 0.9rem;                                  /* from .nav__links a, footer links, form labels font-size */
  --text-xs: 0.8rem;                                 /* from .section-label, .footer h4, .footer__bottom, .badge font-size */

  --heading-font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;  /* was --font-heading */
  --text-font-family: 'Source Sans 3', 'Source Sans Pro', -apple-system, BlinkMacSystemFont, sans-serif;  /* was --font-body */
  --heading-line-height: 1.3;                        /* ORIGINAL value from h1-h6 line-height */
  --text-line-height: 1.7;                           /* ORIGINAL value from body line-height */

  /* --- Spacing (EXACT original values, ACSS naming) --- */
  --space-3xs: 0.25rem;
  --space-2xs: 0.5rem;             /* was --space-xs (0.5rem) */
  --space-xs: 0.7rem;
  --space-s: 1rem;                 /* was --space-sm (1rem) */
  --space-m: 1.5rem;               /* was --space-md (1.5rem) */
  --space-l: 2.5rem;               /* was --space-lg (2.5rem) */
  --space-xl: 4rem;                /* was --space-xl (4rem) */
  --space-2xl: 6rem;               /* was --space-2xl (6rem) */
  --section-space-s: 2.5rem;
  --section-space-m: 4rem;         /* same as --space-xl, used by .section padding */
  --section-space-l: 6rem;

  /* --- Layout (EXACT original values) --- */
  --content-width: 1200px;         /* was --max-width */
  --gutter: 1.5rem;                /* was --space-md used for container padding */
  --grid-gap: 1.5rem;              /* was --space-md used for .grid gap */
  --nav-height: 80px;              /* from :root --nav-height */
  --nav-height-scrolled: 64px;     /* from :root --nav-height-scrolled */

  /* --- Border radius (EXACT original values) --- */
  --radius: 8px;                   /* was --border-radius */
  --radius-l: 16px;                /* was --border-radius-lg */
  --radius-pill: 50px;             /* from buttons, badges border-radius: 50px */

  /* --- Borders --- */
  --border: 1px solid var(--border-color);  /* shorthand using border-color token */

  /* --- Transitions (EXACT original values) --- */
  --transition: 0.3s ease;         /* from :root --transition */
  --transition-slow: 0.5s ease;    /* from :root --transition-slow */

  /* --- Card tokens (EXACT original values) --- */
  --card-padding: 1.5rem;          /* from .card__body padding: var(--space-md) = 1.5rem */
  --card-radius: 16px;             /* cards use --border-radius-lg = 16px */
  --card-shadow: 0 4px 20px rgba(27, 58, 42, 0.06);       /* from .card box-shadow */
  --card-shadow-hover: 0 12px 40px rgba(27, 58, 42, 0.12); /* from .card:hover box-shadow */

  /* --- Button tokens (EXACT original values) --- */
  --btn-padding-block: 0.85rem;    /* from .btn padding: 0.85rem 2rem */
  --btn-padding-inline: 2rem;      /* from .btn padding: 0.85rem 2rem */
  --btn-font-weight: 700;          /* from .btn font-weight */
  --btn-radius: 50px;              /* from .btn border-radius */
  --btn-transition: 0.3s ease;     /* from .btn transition: all var(--transition) */
  --btn-focus-ring: 0 0 0 3px rgba(91, 124, 79, 0.12);   /* from form input focus box-shadow */

  /* --- Shadow scale (EXACT original values) --- */
  --box-shadow-nav: 0 2px 20px rgba(27, 58, 42, 0.08);   /* from .nav.scrolled box-shadow */
  --box-shadow-split: 0 10px 40px rgba(27, 58, 42, 0.1);  /* from .split__image box-shadow */
}