/* ================================================
   BRAND.CSS — Fernweh Reisen GmbH
   Design Tokens, Typography & Brand System
   ================================================ */

@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@400;500;600;700;800&family=IBM+Plex+Mono:wght@400;500&display=swap');

/* ─── Design Tokens ─────────────────────────────── */
:root {

  /* Colors */
  --clr-primary:       #243A4A;
  --clr-secondary:     #344B3F;
  --clr-accent:        #E6B85C;
  --clr-accent-2:      #A94A3F;
  --clr-bg:            #F1F2EE;
  --clr-bg-alt:        #E3E5DF;
  --clr-bg-dark:       #3B4147;
  --clr-text:          #222629;
  --clr-text-muted:    #5A6169;
  --clr-text-on-dark:  rgba(255,255,255,0.88);
  --clr-white:         #FFFFFF;
  --clr-border:        rgba(36,58,74,0.12);
  --clr-border-dark:   rgba(255,255,255,0.14);

  /* Gradients */
  --grad-hero:     linear-gradient(135deg, #243A4A 0%, #344B3F 55%, #3B4147 100%);
  --grad-light:    linear-gradient(180deg, #F1F2EE 0%, #E3E5DF 100%);
  --grad-accent:   linear-gradient(135deg, #E6B85C 0%, #F2CF85 100%);
  --grad-accent-h: linear-gradient(135deg, #E6B85C 0%, #EDC46F 100%);
  --grad-forest:   linear-gradient(135deg, #344B3F 0%, #5C7A68 100%);
  --overlay:       rgba(36,58,74,0.48);
  --overlay-light: rgba(36,58,74,0.22);

  /* Fonts */
  --font-sans: 'Inter', 'Manrope', system-ui, -apple-system, sans-serif;
  --font-alt:  'Manrope', 'Inter', sans-serif;
  --font-mono: 'IBM Plex Mono', 'Courier New', monospace;

  /* Font Sizes */
  --fs-xs:   clamp(0.688rem, 0.9vw,  0.75rem);
  --fs-sm:   clamp(0.813rem, 1.1vw,  0.875rem);
  --fs-base: clamp(0.938rem, 1.4vw,  1rem);
  --fs-md:   clamp(1rem,     1.6vw,  1.125rem);
  --fs-lg:   clamp(1.125rem, 2vw,    1.375rem);
  --fs-xl:   clamp(1.375rem, 2.5vw,  1.75rem);
  --fs-2xl:  clamp(1.75rem,  3vw,    2.25rem);
  --fs-3xl:  clamp(2.25rem,  4vw,    3rem);
  --fs-4xl:  clamp(3rem,     5.5vw,  4rem);
  --fs-5xl:  clamp(3.5rem,   7vw,    5.5rem);
  --fs-hero: clamp(2.8rem,   7.5vw,  6.5rem);
  --fs-mq:   clamp(20px,     3vw,    38px);

  /* Line Heights */
  --lh-tight:   1.15;
  --lh-snug:    1.3;
  --lh-normal:  1.6;
  --lh-relaxed: 1.75;
  --lh-loose:   2.1;

  /* Font Weights */
  --fw-light:    300;
  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;
  --fw-extra:    800;

  /* Spacing */
  --sp-1:  4px;   --sp-2:  8px;   --sp-3:  12px;  --sp-4:  16px;
  --sp-5:  20px;  --sp-6:  24px;  --sp-8:  32px;  --sp-10: 40px;
  --sp-12: 48px;  --sp-16: 64px;  --sp-20: 80px;  --sp-24: 96px;
  --sp-32: 128px;
  --section-py: clamp(72px, 9vw, 128px);

  /* Container */
  --container:        1280px;
  --container-narrow: 960px;

  /* Radius */
  --radius-xs:   4px;
  --radius-sm:   8px;
  --radius-md:   14px;
  --radius-lg:   24px;
  --radius-xl:   40px;
  --radius-full: 9999px;

  /* Shadows */
  --sh-xs:     0 1px 4px  rgba(34,38,41,0.07);
  --sh-sm:     0 4px 14px rgba(34,38,41,0.09);
  --sh-md:     0 8px 28px rgba(34,38,41,0.11);
  --sh-lg:     0 20px 56px rgba(34,38,41,0.13);
  --sh-xl:     0 40px 90px rgba(34,38,41,0.16);
  --sh-accent: 0 10px 36px rgba(230,184,92,0.30);

  /* Transitions */
  --t-fast:   150ms cubic-bezier(0.4,0,0.2,1);
  --t-mid:    300ms cubic-bezier(0.4,0,0.2,1);
  --t-slow:   500ms cubic-bezier(0.4,0,0.2,1);
  --t-spring: 500ms cubic-bezier(0.34,1.56,0.64,1);

  /* Z-index */
  --z-base:    1;
  --z-raised:  10;
  --z-overlay: 100;
  --z-header:  300;
}

/* ─── Base Reset ───────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  scroll-behavior: smooth;
  overflow-x: hidden;
  max-width: 100vw;
}

body {
  font-family:             var(--font-sans);
  font-size:               var(--fs-base);
  line-height:             var(--lh-relaxed);
  color:                   var(--clr-text);
  background:              var(--clr-bg);
  font-weight:             var(--fw-regular);
  -webkit-font-smoothing:  antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x:              hidden;
  max-width:               100vw;
  position:                relative;
}

img, video    { max-width: 100%; height: auto; display: block; }
ul, ol        { list-style: none; }
button        { cursor: pointer; font-family: var(--font-sans); }
input, textarea, select { font-family: var(--font-sans); }

h1, h2, h3, h4, h5, h6 {
  font-family:    var(--font-alt);
  line-height:    var(--lh-tight);
  font-weight:    var(--fw-semibold);
  color:          var(--clr-primary);
  letter-spacing: -0.02em;
}
h1 { font-size: var(--fs-4xl); font-weight: var(--fw-bold); }
h2 { font-size: var(--fs-3xl); }
h3 { font-size: var(--fs-xl); }
h4 { font-size: var(--fs-lg); }
h5 { font-size: var(--fs-md); }
h6 { font-size: var(--fs-base); font-weight: var(--fw-semibold); }

p { margin-bottom: var(--sp-4); line-height: var(--lh-relaxed); }
p:last-child { margin-bottom: 0; }

a { color: var(--clr-primary); text-decoration: none; transition: color var(--t-fast); }
a:hover { color: var(--clr-accent); }

/* ─── Label / Overline ─────────────────────────── */
.label {
  font-family:    var(--font-mono);
  font-size:      var(--fs-xs);
  font-weight:    var(--fw-medium);
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color:          var(--clr-accent);
  display:        block;
  margin-bottom:  var(--sp-3);
}
.label--light { color: rgba(255,255,255,0.55); }
.label--dark  { color: var(--clr-text-muted); }

/* ─── Buttons ──────────────────────────────────── */
.btn {
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  gap:             var(--sp-2);
  padding:         14px 34px;
  font-family:     var(--font-sans);
  font-size:       var(--fs-sm);
  font-weight:     var(--fw-semibold);
  letter-spacing:  0.05em;
  text-transform:  uppercase;
  border:          none;
  border-radius:   var(--radius-sm);
  cursor:          pointer;
  transition:      all var(--t-mid);
  text-decoration: none;
  white-space:     nowrap;
  position:        relative;
  overflow:        hidden;
  line-height:     1;
}
.btn-primary { background: var(--grad-accent); color: var(--clr-primary); box-shadow: var(--sh-accent); }
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 16px 44px rgba(230,184,92,0.42); color: var(--clr-primary); }

.btn-outline { background: transparent; color: var(--clr-accent); border: 1.5px solid var(--clr-accent); }
.btn-outline:hover { background: var(--grad-accent); color: var(--clr-primary); transform: translateY(-2px); box-shadow: var(--sh-accent); }

.btn-light { background: var(--clr-white); color: var(--clr-primary); box-shadow: var(--sh-sm); }
.btn-light:hover { background: var(--clr-accent); color: var(--clr-primary); transform: translateY(-2px); }

.btn-ghost { background: transparent; color: var(--clr-white); border: 1.5px solid var(--clr-border-dark); }
.btn-ghost:hover { background: rgba(255,255,255,0.12); color: var(--clr-white); border-color: rgba(255,255,255,0.30); }

.btn-dark { background: var(--clr-primary); color: var(--clr-white); }
.btn-dark:hover { background: var(--clr-secondary); color: var(--clr-white); transform: translateY(-2px); }

.btn-lg { padding: 18px 46px; font-size: var(--fs-base); border-radius: var(--radius-md); }
.btn-sm { padding: 10px 22px; font-size: var(--fs-xs); }

/* ─── Utility ──────────────────────────────────── */
.text-accent   { color: var(--clr-accent); }
.text-accent2  { color: var(--clr-accent-2); }
.text-muted    { color: var(--clr-text-muted); }
.text-white    { color: var(--clr-white) !important; }
.text-primary  { color: var(--clr-primary); }
.text-center   { text-align: center; }
.font-mono     { font-family: var(--font-mono); }
.fw-medium     { font-weight: var(--fw-medium); }
.fw-semibold   { font-weight: var(--fw-semibold); }
.fw-bold       { font-weight: var(--fw-bold); }

.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}