/* ============================================================
   BRAND.CSS — Entdecke Deutschland
   Alpine-inspired premium travel design system
   Palette: Alpine Lake Blue × Black Forest Pine × Golden Wheat
============================================================ */

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

/* ─── CSS Custom Properties ─── */
:root {

  /* ── Brand Palette ── */
  --c-primary:       #243A4A;   /* Alpine Lake Blue */
  --c-secondary:     #344B3F;   /* Black Forest Pine */
  --c-accent:        #E6B85C;   /* Golden Wheat Light */
  --c-accent-hover:  #EDC46F;
  --c-accent-2:      #A94A3F;   /* Brick Heritage Red */
  --c-bg:            #F1F2EE;   /* Soft Limestone */
  --c-bg-alt:        #E3E5DF;
  --c-bg-dark:       #3B4147;   /* Deep Slate Stone */
  --c-text:          #222629;   /* Charcoal Ink */
  --c-text-light:    #4D5660;
  --c-text-muted:    #7E8A95;
  --c-white:         #FFFFFF;
  --c-border:        rgba(36, 58, 74, 0.11);
  --c-border-light:  rgba(36, 58, 74, 0.06);

  /* ── Gradients ── */
  --g-hero:      linear-gradient(135deg, #243A4A 0%, #344B3F 52%, #3B4147 100%);
  --g-light:     linear-gradient(180deg, #F1F2EE 0%, #E3E5DF 100%);
  --g-accent:    linear-gradient(135deg, #E6B85C 0%, #F2CF85 100%);
  --g-nature:    linear-gradient(135deg, #344B3F 0%, #5C7A68 100%);
  --g-dark:      linear-gradient(180deg, #3B4147 0%, #2A2F34 100%);
  --g-overlay:   rgba(36, 58, 74, 0.38);
  --g-overlay-l: rgba(36, 58, 74, 0.18);

  /* ── Typography ── */
  --f-sans:    'Inter', 'Manrope', -apple-system, sans-serif;
  --f-display: 'Manrope', 'Inter', sans-serif;
  --f-mono:    'IBM Plex Mono', 'Courier New', monospace;

  /* ── Type Scale ── */
  --fs-xs:   clamp(0.72rem,  1.3vw, 0.8rem);
  --fs-sm:   clamp(0.84rem,  1.7vw, 0.925rem);
  --fs-base: clamp(0.975rem, 1.9vw, 1.05rem);
  --fs-md:   clamp(1.05rem,  2.1vw, 1.175rem);
  --fs-lg:   clamp(1.175rem, 2.6vw, 1.35rem);
  --fs-xl:   clamp(1.35rem,  3vw,   1.7rem);
  --fs-2xl:  clamp(1.75rem,  3.8vw, 2.5rem);
  --fs-3xl:  clamp(2.25rem,  5vw,   3.5rem);
  --fs-hero: clamp(2.75rem,  6.5vw, 5.25rem);
  --fs-mq:   clamp(1.25rem,  3vw,   2.375rem);

  /* ── Line Heights ── */
  --lh-tight:  1.22;
  --lh-snug:   1.35;
  --lh-base:   1.62;
  --lh-loose:  1.82;

  /* ── Letter Spacing ── */
  --ls-tight:  -0.03em;
  --ls-snug:   -0.015em;
  --ls-base:   0em;
  --ls-wide:   0.05em;
  --ls-wider:  0.1em;
  --ls-widest: 0.2em;

  /* ── Spacing ── */
  --sp-1:  0.25rem;
  --sp-2:  0.5rem;
  --sp-3:  0.75rem;
  --sp-4:  1rem;
  --sp-5:  1.25rem;
  --sp-6:  1.5rem;
  --sp-8:  2rem;
  --sp-10: 2.5rem;
  --sp-12: 3rem;
  --sp-16: 4rem;
  --sp-20: 5rem;
  --sp-24: 6rem;
  --sp-32: 8rem;

  /* ── Border Radius ── */
  --r-sm:   4px;
  --r-md:   8px;
  --r-lg:   14px;
  --r-xl:   22px;
  --r-2xl:  32px;
  --r-full: 9999px;

  /* ── Shadows ── */
  --sh-xs: 0 1px 4px rgba(36,58,74,0.07);
  --sh-sm: 0 2px 12px rgba(36,58,74,0.09);
  --sh-md: 0 5px 28px rgba(36,58,74,0.12);
  --sh-lg: 0 10px 52px rgba(36,58,74,0.17);
  --sh-xl: 0 22px 80px rgba(36,58,74,0.23);
  --sh-accent: 0 8px 30px rgba(230,184,92,0.35);
  --sh-card: 0 4px 32px rgba(36,58,74,0.10);

  /* ── Transitions ── */
  --t-fast:   0.18s ease;
  --t-base:   0.32s ease;
  --t-slow:   0.6s cubic-bezier(0.23, 1, 0.32, 1);
  --t-spring: 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
  --t-bounce: 0.45s cubic-bezier(0.175, 0.885, 0.32, 1.275);

  /* ── Layout ── */
  --max-w:    1300px;
  --pad-x:    clamp(1.25rem, 5vw, 3.5rem);
  --header-h: 76px;
}