/* ============================================================
   BRAND.CSS — ReiseFrei Deutschland GmbH
   Design Tokens: Colors, Typography, Spacing, Gradients
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Manrope:wght@300;400;500;600;700;800&family=IBM+Plex+Mono:wght@400;500&display=swap');

:root {
  /* ── Core Palette ── */
  --color-primary:          #243A4A;   /* Alpine Lake Blue */
  --color-secondary:        #344B3F;   /* Black Forest Pine */
  --color-accent:           #E6B85C;   /* Golden Wheat Light */
  --color-accent-hover:     #EDC46F;
  --color-accent-2:         #A94A3F;   /* Brick Heritage Red */
  --color-bg:               #F1F2EE;   /* Soft Limestone */
  --color-bg-alt:           #E3E5DF;
  --color-bg-contrast:      #3B4147;   /* Deep Slate Stone */
  --color-text:             #222629;   /* Charcoal Ink */
  --color-text-light:       #556070;
  --color-text-muted:       #8A9198;
  --color-white:            #FFFFFF;
  --color-border:           rgba(36, 58, 74, 0.12);
  --color-border-light:     rgba(36, 58, 74, 0.06);
  --color-border-accent:    rgba(230, 184, 92, 0.3);

  /* ── Gradients ── */
  --gradient-hero:    linear-gradient(135deg, #243A4A 0%, #344B3F 55%, #3B4147 100%);
  --gradient-light:   linear-gradient(180deg, #F1F2EE 0%, #E3E5DF 100%);
  --gradient-accent:  linear-gradient(135deg, #E6B85C 0%, #F2CF85 100%);
  --gradient-nature:  linear-gradient(135deg, #344B3F 0%, #5C7A68 100%);
  --gradient-dark:    linear-gradient(135deg, #243A4A 0%, #3B4147 100%);
  --overlay:          rgba(36, 58, 74, 0.38);
  --overlay-dark:     rgba(36, 58, 74, 0.68);
  --overlay-light:    rgba(241, 242, 238, 0.92);

  /* ── Typography ── */
  --font-primary:  'Inter', 'Manrope', sans-serif;
  --font-display:  'Manrope', 'Inter', sans-serif;
  --font-mono:     'IBM Plex Mono', monospace;

  /* ── Type Scale ── */
  --text-xs:    clamp(0.68rem,  1vw,    0.78rem);
  --text-sm:    clamp(0.80rem,  1.2vw,  0.875rem);
  --text-base:  clamp(0.9rem,   1.5vw,  1rem);
  --text-md:    clamp(1rem,     1.8vw,  1.125rem);
  --text-lg:    clamp(1.1rem,   2vw,    1.25rem);
  --text-xl:    clamp(1.25rem,  2.5vw,  1.5rem);
  --text-2xl:   clamp(1.5rem,   3vw,    2rem);
  --text-3xl:   clamp(1.9rem,   3.8vw,  2.6rem);
  --text-4xl:   clamp(2.4rem,   5vw,    3.4rem);
  --text-hero:  clamp(2.8rem,   6.5vw,  5rem);

  /* ── Spacing Scale ── */
  --sp-2xs: 0.25rem;
  --sp-xs:  0.5rem;
  --sp-sm:  0.875rem;
  --sp-md:  1.25rem;
  --sp-lg:  1.75rem;
  --sp-xl:  2.5rem;
  --sp-2xl: 4rem;
  --sp-3xl: 6rem;
  --sp-4xl: 9rem;

  /* ── Border Radius ── */
  --radius-xs:   3px;
  --radius-sm:   6px;
  --radius-md:   10px;
  --radius-lg:   16px;
  --radius-xl:   24px;
  --radius-pill: 999px;

  /* ── Shadows ── */
  --shadow-xs:  0 1px 4px  rgba(36, 58, 74, 0.06);
  --shadow-sm:  0 2px 10px rgba(36, 58, 74, 0.08);
  --shadow-md:  0 6px 24px rgba(36, 58, 74, 0.11);
  --shadow-lg:  0 16px 48px rgba(36, 58, 74, 0.15);
  --shadow-xl:  0 32px 80px rgba(36, 58, 74, 0.18);
  --shadow-accent: 0 8px 28px rgba(230, 184, 92, 0.32);

  /* ── Transitions ── */
  --t-fast:   0.18s ease;
  --t-base:   0.32s ease;
  --t-slow:   0.55s cubic-bezier(0.4, 0, 0.2, 1);
  --t-spring: 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);

  /* ── Layout ── */
  --container-max:     1240px;
  --container-wide:    1400px;
  --container-padding: clamp(1.25rem, 5vw, 2.5rem);
  --header-height:     72px;
  --section-py:        clamp(4rem, 8vw, 7rem);
}