/* ==========================================================================
   BRAND.CSS — Fernweh Deutschland GmbH
   Design tokens, color palette, typography, spacing system
   ========================================================================== */

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

/* --------------------------------------------------------------------------
   DESIGN TOKENS
   -------------------------------------------------------------------------- */
:root {

  /* ---- Core palette ---- */
  --c-primary:        #1F3A45;   /* Rhine Forest Blue       */
  --c-secondary:      #2E4A3E;   /* Black Forest Deep Green */
  --c-accent:         #C9A24A;   /* Golden Field Light      */
  --c-accent-2:       #8C3F3A;   /* Deep Earth Red          */
  --c-bg:             #E1E8EA;   /* River Fog Gray          */
  --c-bg-contrast:    #2B3436;   /* Stone Forest Shadow     */
  --c-text:           #1E2324;   /* Charcoal Forest Ink     */

  /* ---- Extended palette ---- */
  --c-accent-hover:   #CFAC5C;
  --c-accent-light:   #D9B96E;
  --c-secondary-light:#5F776B;
  --c-accent2-light:  #A65750;
  --c-bg-soft:        #D2DBDE;
  --c-bg-dark:        #192D37;
  --c-white:          #FFFFFF;
  --c-white-80:       rgba(255,255,255,0.80);
  --c-white-60:       rgba(255,255,255,0.60);
  --c-white-20:       rgba(255,255,255,0.20);
  --c-white-10:       rgba(255,255,255,0.10);
  --c-overlay:        rgba(31, 58, 69, 0.45);
  --c-text-muted:     rgba(30, 35, 36, 0.60);
  --c-text-light:     rgba(225, 232, 234, 0.75);

  /* ---- Gradients ---- */
  --g-hero:     linear-gradient(145deg, #1F3A45 0%, #2E4A3E 55%, #2B3436 100%);
  --g-light:    linear-gradient(180deg, #E1E8EA 0%, #D2DBDE 100%);
  --g-accent:   linear-gradient(135deg, #C9A24A 0%, #D9B96E 100%);
  --g-forest:   linear-gradient(180deg, #2E4A3E 0%, #5F776B 100%);
  --g-section:  linear-gradient(160deg, #1F3A45 0%, #2E4A3E 100%);
  --g-warm:     linear-gradient(135deg, #8C3F3A 0%, #A65750 100%);
  --g-card-dark:linear-gradient(180deg, rgba(31,58,69,0) 0%, rgba(31,58,69,0.85) 100%);

  /* ---- Typography ---- */
  --ff-body:    'Inter', 'Manrope', system-ui, sans-serif;
  --ff-display: 'Manrope', 'Inter', system-ui, sans-serif;
  --ff-mono:    'IBM Plex Mono', 'Courier New', monospace;

  /* ---- Type scale ---- */
  --fs-xs:      clamp(0.688rem, 0.8vw,  0.75rem);
  --fs-sm:      clamp(0.8rem,   1vw,    0.875rem);
  --fs-base:    clamp(0.9rem,   1.2vw,  1rem);
  --fs-md:      clamp(1rem,     1.5vw,  1.125rem);
  --fs-lg:      clamp(1.1rem,   1.8vw,  1.25rem);
  --fs-xl:      clamp(1.25rem,  2.2vw,  1.5rem);
  --fs-2xl:     clamp(1.5rem,   2.8vw,  2rem);
  --fs-3xl:     clamp(1.875rem, 3.5vw,  2.5rem);
  --fs-4xl:     clamp(2.25rem,  4.5vw,  3.5rem);
  --fs-5xl:     clamp(3rem,     6.5vw,  5.25rem);
  --fs-hero:    clamp(3.25rem,  8.5vw,  7rem);
  --fs-marquee: clamp(20px,     3vw,    38px);

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

  /* ---- Line heights ---- */
  --lh-tight:    1.1;
  --lh-snug:     1.3;
  --lh-heading:  1.2;
  --lh-normal:   1.6;
  --lh-relaxed:  1.75;

  /* ---- Letter spacing ---- */
  --ls-tight:  -0.03em;
  --ls-snug:   -0.02em;
  --ls-normal:  0;
  --ls-wide:    0.05em;
  --ls-wider:   0.1em;
  --ls-widest:  0.15em;

  /* ---- Spacing scale ---- */
  --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;

  /* ---- Section spacing ---- */
  --section-py:    clamp(64px, 9vw, 128px);
  --section-py-sm: clamp(40px, 5vw, 80px);
  --section-gap:   clamp(40px, 6vw, 96px);

  /* ---- Layout ---- */
  --container:     1280px;
  --container-pad: clamp(20px, 5vw, 80px);

  /* ---- Border radius ---- */
  --r-sm:   4px;
  --r-md:   8px;
  --r-lg:   12px;
  --r-xl:   20px;
  --r-2xl:  32px;
  --r-full: 9999px;

  /* ---- Shadows ---- */
  --sh-xs:  0 1px 4px rgba(31,58,69,0.06);
  --sh-sm:  0 2px 10px rgba(31,58,69,0.08);
  --sh-md:  0 6px 24px rgba(31,58,69,0.11);
  --sh-lg:  0 16px 56px rgba(31,58,69,0.15);
  --sh-xl:  0 28px 88px rgba(31,58,69,0.20);
  --sh-card-hover: 0 24px 64px rgba(31,58,69,0.22);
  --sh-accent:     0 8px 36px rgba(201,162,74,0.32);
  --sh-inset:      inset 0 1px 3px rgba(31,58,69,0.12);

  /* ---- Borders ---- */
  --b-subtle:  1px solid rgba(31,58,69,0.08);
  --b-light:   1px solid rgba(31,58,69,0.14);
  --b-medium:  1px solid rgba(31,58,69,0.20);
  --b-accent:  1px solid rgba(201,162,74,0.38);
  --b-white:   1px solid rgba(255,255,255,0.15);
  --b-white-md:1px solid rgba(255,255,255,0.25);

  /* ---- Transitions ---- */
  --t-fast:   0.18s cubic-bezier(0.4, 0, 0.2, 1);
  --t-base:   0.32s cubic-bezier(0.4, 0, 0.2, 1);
  --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);
  --t-ease:   0.4s ease;

  /* ---- Z-index ---- */
  --z-back:      -1;
  --z-base:       0;
  --z-raised:     10;
  --z-dropdown:   100;
  --z-sticky:     500;
  --z-modal:      900;
  --z-top:       1000;
}

/* --------------------------------------------------------------------------
   BASE RESET
   -------------------------------------------------------------------------- */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
  overflow-x: hidden;
  max-width: 100vw;
}

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

img, svg, video {
  display: block;
  max-width: 100%;
  height: auto;
}

a {
  color: inherit;
  text-decoration: none;
}

ul, ol {
  list-style: none;
}

button, input, textarea, select {
  font: inherit;
  border: none;
  background: none;
  outline: none;
}

button {
  cursor: pointer;
}

/* --------------------------------------------------------------------------
   TYPOGRAPHY BASE
   -------------------------------------------------------------------------- */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--ff-display);
  font-weight: var(--fw-bold);
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-snug);
  color: inherit;
}

p {
  line-height: var(--lh-relaxed);
  max-width: 68ch;
}

strong { font-weight: var(--fw-semibold); }
em     { font-style: italic; }

/* --------------------------------------------------------------------------
   UTILITY CLASSES
   -------------------------------------------------------------------------- */
.text-accent  { color: var(--c-accent); }
.text-white   { color: var(--c-white); }
.text-muted   { color: var(--c-text-muted); }
.text-center  { text-align: center; }
.text-upper   { text-transform: uppercase; letter-spacing: var(--ls-widest); }
.font-mono    { font-family: var(--ff-mono); }
.font-display { font-family: var(--ff-display); }
.fw-medium    { font-weight: var(--fw-medium); }
.fw-semibold  { font-weight: var(--fw-semibold); }
.fw-bold      { font-weight: var(--fw-bold); }
.fw-extrabold { font-weight: var(--fw-extrabold); }