/* ==========================================================================
   Design Tokens — Treppenidee Redesign
   ========================================================================== */

/* Breakpoints (used in media queries throughout the project):
   Mobile:  < 768px
   Tablet:  768px – 1024px
   Desktop: > 1024px
*/

:root {
  /* ---- Colors ---- */
  --color-primary:      #5C4033; /* warm walnut brown — headers, CTAs, accents */
  --color-primary-dark:  #3E2A1E; /* hover states, footer bg */
  --color-accent:       #B8860B; /* dark goldenrod — highlights, badges, icons */
  --color-bg:           #FAF8F5; /* warm off-white — page background */
  --color-bg-alt:       #F0EBE3; /* warm cream — alternate sections */
  --color-text:         #2C2C2C; /* body text */
  --color-text-light:   #6B6B6B; /* secondary / muted text */
  --color-white:        #FFFFFF; /* cards, overlays */
  --color-success:      #4A7C28; /* form success */
  --color-error:        #C0392B; /* form error */

  /* ---- Typography ---- */
  --font-heading:        'Playfair Display', Georgia, serif;
  --font-body:           'Source Sans 3', 'Source Sans Pro', sans-serif;
  --font-size-h1:        clamp(2rem, 5vw, 3.5rem);
  --font-size-h2:        clamp(1.5rem, 3vw, 2.25rem);
  --font-size-h3:        clamp(1.25rem, 2vw, 1.5rem);
  --font-size-body:      1rem;
  --font-size-small:     0.875rem;
  --line-height:         1.7;
  --line-height-heading: 1.3;

  /* ---- Spacing & Layout ---- */
  --radius:       4px;
  --radius-lg:    8px;
  --shadow:       0 2px 12px rgba(0, 0, 0, 0.08);
  --shadow-hover: 0 4px 20px rgba(0, 0, 0, 0.12);
  --container:    1200px;
  --header-container: 90vw;
  --footer-container: 90vw;
  --section-gap:  clamp(4rem, 8vw, 8rem);
  --transition:   0.3s ease;
}