/* =========================================================
   KANZLEI BREITBARTH – DESIGN TOKENS v2.0
   Zentrale CSS Custom Properties – hier alles anpassen
   ========================================================= */

:root {
  /* --- Farben --- */
  --color-white:        #FFFFFF;
  --color-near-black:   #111111;

  /* Primäre Akzentfarbe: Rolex-Grün */
  --color-green:        #3B6434;
  --color-green-dark:   #2e4f29;
  --color-green-light:  rgba(59, 100, 52, 0.09);
  --color-green-bg:     rgba(59, 100, 52, 0.06);

  /* Sekundäre Akzentfarbe: Purpurrot */
  --color-violet:       #8B1A4A;
  --color-violet-dark:  #6e1439;
  --color-violet-light: rgba(139, 26, 74, 0.12);
  --color-violet-bg:    rgba(139, 26, 74, 0.06);

  /* Grautöne */
  --color-gray-100:  #F8F8F6;   /* Off-White, Formulare */
  --color-gray-200:  #F0F0EE;
  --color-gray-300:  #E2E2DF;   /* Trennlinien */
  --color-gray-400:  #CCCCCA;   /* Balken "nicht adoptiert" */
  --color-gray-500:  #999997;   /* Sekundärer Text */
  --color-gray-600:  #666664;

  /* --- Typografie --- */
  --font-serif:   'Bodoni Moda', Georgia, 'Times New Roman', serif;
  --font-sans:    'Satoshi', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;

  /* --- Schriftgrößen (fluid) --- */
  --fs-display: clamp(3.25rem, 7.5vw, 7rem);
  --fs-hero:    clamp(2.5rem, 5.5vw, 5rem);
  --fs-h2:      clamp(1.875rem, 3.8vw, 3.25rem);
  --fs-h3:      clamp(1.3rem, 2.2vw, 1.75rem);
  --fs-h4:      clamp(1.0625rem, 1.6vw, 1.3rem);
  --fs-body:    clamp(1rem, 1.2vw, 1.125rem);
  --fs-small:   0.9375rem;
  --fs-label:   0.8125rem;
  --fs-xs:      0.75rem;

  /* --- Schriftstärken --- */
  --fw-light:   300;
  --fw-regular: 400;
  --fw-medium:  500;
  --fw-semibold: 600;
  --fw-bold:    700;

  /* --- Zeilenhöhen --- */
  --lh-tight:   1.1;
  --lh-snug:    1.3;
  --lh-normal:  1.6;
  --lh-relaxed: 1.8;

  /* --- Abstände (8px Grid) --- */
  --space-1:  0.25rem;   /*  4px */
  --space-2:  0.5rem;    /*  8px */
  --space-3:  0.75rem;   /* 12px */
  --space-4:  1rem;      /* 16px */
  --space-5:  1.25rem;   /* 20px */
  --space-6:  1.5rem;    /* 24px */
  --space-8:  2rem;      /* 32px */
  --space-10: 2.5rem;    /* 40px */
  --space-12: 3rem;      /* 48px */
  --space-16: 4rem;      /* 64px */
  --space-20: 5rem;      /* 80px */
  --space-24: 6rem;      /* 96px */
  --space-32: 8rem;      /* 128px */
  --space-40: 10rem;     /* 160px */
  --space-48: 12rem;     /* 192px */

  /* --- Layout --- */
  --max-width:       1200px;
  --max-width-text:  720px;
  --nav-height:      72px;
  --radius-sm:       4px;
  --radius-md:       8px;
  --radius-lg:       16px;

  /* --- Übergänge --- */
  --ease-premium:  cubic-bezier(0.16, 1, 0.3, 1);
  --ease-gentle:   cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --ease-out:      cubic-bezier(0.0, 0.0, 0.2, 1);
  --duration-fast: 200ms;
  --duration-mid:  400ms;
  --duration-slow: 700ms;
  --duration-xslow:1000ms;

  /* --- Schatten --- */
  --shadow-xs:  0 1px 2px rgba(0,0,0,0.05);
  --shadow-sm:  0 1px 4px rgba(0,0,0,0.06), 0 2px 8px rgba(0,0,0,0.04);
  --shadow-md:  0 4px 16px rgba(0,0,0,0.08), 0 2px 6px rgba(0,0,0,0.04);
  --shadow-lg:  0 8px 32px rgba(0,0,0,0.10), 0 2px 8px rgba(0,0,0,0.05);
  --shadow-xl:  0 16px 56px rgba(0,0,0,0.13), 0 4px 16px rgba(0,0,0,0.06);
  --shadow-nav: 0 1px 0 rgba(0,0,0,0.07), 0 2px 20px rgba(0,0,0,0.06);
}