/*
 * DACHDECKER STEFAN — CSS Design Tokens
 * Single source of truth for all CSS custom properties.
 * NOTE: Google Fonts used here for pilot/dev build.
 * → For production: self-host fonts in assets/fonts/ and replace @import.
 */
@import url('fonts.css');

:root {
  /* ── Brand Colors ── */
  --color-primary:      #2C3E50;
  --color-primary-dark: #1a252f;
  --color-accent:       #C0392B;
  --color-accent-dark:  #962d22;
  --color-accent-light: rgba(192, 57, 43, 0.10);

  /* ── Neutral Palette ── */
  --color-white:        #FFFFFF;
  --color-bg:           #FFFFFF;
  --color-bg-alt:       #F5F1EC;
  --color-bg-dark:      #1a252f;
  --color-bg-footer:    #111820;
  --color-text:         #2C3E50;
  --color-text-light:   #5a6a7a;
  --color-text-muted:   #8a9aaa;
  --color-border:       #E8E0D8;
  --color-surface:      #FDFAF7;

  /* ── Hero Overlay ── */
  --color-overlay-dark: rgba(26, 37, 47, 0.82);

  /* ── Typography ── */
  --font-heading: 'Playfair Display', 'Georgia', serif;
  --font-body:    'Inter', 'Helvetica Neue', Arial, sans-serif;

  /* ── Spacing Scale ── */
  --space-xs:  8px;
  --space-sm:  16px;
  --space-md:  32px;
  --space-lg:  64px;
  --space-xl:  96px;
  --space-xxl: 140px;

  /* ── Border Radius ── */
  --radius-sm:   8px;
  --radius-md:   16px;
  --radius-lg:   24px;
  --radius-pill: 50px;

  /* ── Shadows ── */
  --shadow-soft:   0 4px 24px rgba(44, 62, 80, 0.08);
  --shadow-card:   0 8px 32px rgba(44, 62, 80, 0.10);
  --shadow-hover:  0 20px 48px rgba(44, 62, 80, 0.18);
  --shadow-header: 0 2px 20px rgba(0, 0, 0, 0.12);

  /* ── Animation ── */
  --transition-smooth: all 0.35s cubic-bezier(0.25, 0.8, 0.25, 1);
  --transition-fast:   all 0.18s ease;

  /* ── Glassmorphism ── */
  --glass-bg:   rgba(255, 255, 255, 0.88);
  --glass-blur: blur(18px);

  /* ── Layout ── */
  --container-max:      1200px;
  --container-wide:     1380px;
  --header-top-h:       44px;
  --header-nav-h:       70px;
  --header-total-h:     114px; /* top + nav combined */
}