/* ==========================================================================
   tokens.css — Design Tokens
   Raumausstatter Köln
   ========================================================================== */

:root {

  /* ---------- Farben ---------- */
  --color-bg:         #F7F3EE;
  --color-surface:    #FBF8F4;
  --color-accent-1:   #C8B89A;
  --color-accent-2:   #C4826A;
  --color-text:       #2E2622;
  --color-text-muted: #6B6259;
  --color-hover:      #EDE8E1;
  --color-footer-bg:  #2E2622;

  /* ---------- Typografie: Fluid Scale ---------- */
  --text-xs:    clamp(0.75rem,  1.5vw, 0.875rem);
  --text-sm:    clamp(0.875rem, 1.8vw, 1rem);
  --text-base:  clamp(1rem,     2vw,   1.125rem);
  --text-lg:    clamp(1.125rem, 2.2vw, 1.25rem);
  --text-xl:    clamp(1.25rem,  2.5vw, 1.5rem);
  --text-2xl:   clamp(1.5rem,   3vw,   2rem);
  --text-3xl:   clamp(2rem,     4vw,   3rem);
  --text-hero:  clamp(3rem,     7vw,   5.5rem);

  /* ---------- Schriftfamilien ---------- */
  --font-serif: 'Fraunces', Georgia, serif;
  --font-sans:  'Inter', system-ui, sans-serif;

  /* ---------- Abstände ---------- */
  --space-xs:   0.5rem;
  --space-sm:   1rem;
  --space-md:   1.5rem;
  --space-lg:   2rem;
  --space-xl:   3rem;
  --space-2xl:  4rem;
  --space-3xl:  5rem;

  --section-py-mobile:  5rem;
  --section-py-desktop: 7.5rem;

  /* ---------- Schatten ---------- */
  --shadow-card:       6px 12px 32px rgba(46, 38, 34, 0.07);
  --shadow-card-hover: 8px 16px 40px rgba(46, 38, 34, 0.12);
  --shadow-nav:        0 2px 24px rgba(46, 38, 34, 0.08);

  /* ---------- Übergänge ---------- */
  --transition-card: transform 0.35s ease-out, box-shadow 0.35s ease-out;
  --transition-base: 0.25s ease-out;

  /* ---------- Layout ---------- */
  --max-width:      1280px;
  --max-width-text:  720px;
  --border-radius:     2px;

  /* ---------- Z-Ebenen ---------- */
  --z-nav:     100;
  --z-overlay:  10;
}