/* ============================================================
   BRAND.CSS — Design Tokens & Base Typography
   Wanderland Reisen — Premium Deutschland Travel
   ============================================================ */

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

/* ============================================================
   CSS CUSTOM PROPERTIES
   ============================================================ */
:root {
  /* Core Palette */
  --c-primary:        #1F3A45;
  --c-secondary:      #2E4A3E;
  --c-accent:         #C9A24A;
  --c-accent-light:   #D9B96E;
  --c-accent-hover:   #CFAC5C;
  --c-accent2:        #8C3F3A;
  --c-bg:             #E1E8EA;
  --c-bg-alt:         #D2DBDE;
  --c-bg-dark:        #2B3436;
  --c-text:           #1E2324;
  --c-text-muted:     #506166;
  --c-text-soft:      #7A9099;
  --c-text-light:     #E1E8EA;
  --c-white:          #FFFFFF;

  /* Transparent Variants */
  --c-primary-08:     rgba(31,  58,  69, 0.08);
  --c-primary-12:     rgba(31,  58,  69, 0.12);
  --c-primary-20:     rgba(31,  58,  69, 0.20);
  --c-primary-40:     rgba(31,  58,  69, 0.40);
  --c-accent-12:      rgba(201,162,  74, 0.12);
  --c-accent-20:      rgba(201,162,  74, 0.20);
  --c-accent-30:      rgba(201,162,  74, 0.30);
  --c-overlay:        rgba(31,  58,  69, 0.50);
  --c-border:         rgba(31,  58,  69, 0.13);
  --c-border-light:   rgba(225,232,234, 0.16);

  /* Gradients */
  --g-hero:       linear-gradient(150deg, #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(135deg, #2E4A3E 0%, #5F776B 100%);
  --g-warm:       linear-gradient(135deg, #8C3F3A 0%, #A65750 100%);
  --g-card-dark:  linear-gradient(160deg, #243840 0%, #1e3330 100%);
  --g-overlay:    linear-gradient(to top, rgba(31,58,69,.88) 0%, rgba(31,58,69,.25) 60%, transparent 100%);

  /* Typography */
  --f-display:  'Manrope', 'Inter', sans-serif;
  --f-body:     'Inter', 'Manrope', sans-serif;
  --f-mono:     'IBM Plex Mono', monospace;

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

  /* Layout */
  --container-max: 1280px;
  --container-pad: clamp(1.25rem, 5vw, 2.5rem);
  --section-py:    clamp(4rem, 8vw, 7rem);

  /* Border Radius */
  --r-sm:   4px;
  --r-md:   8px;
  --r-lg:   14px;
  --r-xl:   22px;
  --r-2xl:  32px;
  --r-pill: 100px;

  /* Shadows */
  --sh-xs:  0 1px 4px  rgba(31,58,69,.06);
  --sh-sm:  0 2px 10px rgba(31,58,69,.08);
  --sh-md:  0 4px 24px rgba(31,58,69,.12);
  --sh-lg:  0 8px 48px rgba(31,58,69,.18);
  --sh-xl:  0 20px 80px rgba(31,58,69,.24);
  --sh-acc: 0 4px 20px rgba(201,162,74,.35);

  /* Transitions */
  --tr-fast:   0.18s ease;
  --tr-base:   0.32s ease;
  --tr-slow:   0.55s cubic-bezier(0.16, 1, 0.3, 1);
  --tr-spring: 0.50s cubic-bezier(0.34, 1.56, 0.64, 1);

  /* Z-Index */
  --z-base:    1;
  --z-card:    10;
  --z-drop:    100;
  --z-header:  500;
  --z-overlay: 800;
  --z-top:     1000;
}

/* ============================================================
   BASE RESET & GLOBAL
   ============================================================ */
*, *::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;
}

body {
  font-family: var(--f-body);
  font-weight: 400;
  line-height: 1.72;
  color: var(--c-text);
  background-color: var(--c-bg);
  overflow-x: hidden;
  position: relative;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img, video, svg { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
button { border: none; background: none; cursor: pointer; font-family: inherit; }
input, textarea, select { font-family: inherit; font-size: 1rem; outline: none; }

/* ============================================================
   TYPOGRAPHY HELPERS
   ============================================================ */
.t-display {
  font-family: var(--f-display);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.025em;
}
.t-headline {
  font-family: var(--f-display);
  font-weight: 600;
  line-height: 1.18;
  letter-spacing: -0.015em;
}
.t-subhead {
  font-family: var(--f-display);
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: -0.01em;
}
.t-body  { font-family: var(--f-body);  font-weight: 400; line-height: 1.72; }
.t-label {
  font-family: var(--f-mono);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* ============================================================
   UTILITY
   ============================================================ */
.text-accent   { color: var(--c-accent); }
.text-light    { color: var(--c-text-light); }
.text-muted    { color: var(--c-text-muted); }
.text-primary  { color: var(--c-primary); }
.text-center   { text-align: center; }

.bg-primary    { background-color: var(--c-primary); }
.bg-secondary  { background-color: var(--c-secondary); }
.bg-dark       { background-color: var(--c-bg-dark); }
.bg-light      { background-color: var(--c-bg); }

.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;
}

/* ============================================================
   SCROLL REVEAL BASE STATE
   ============================================================ */
.reveal {
  opacity: 0;
  transform: translateY(32px);
  transition: opacity 0.75s ease, transform 0.75s cubic-bezier(0.16,1,0.3,1);
}
.reveal.is-visible { opacity: 1; transform: translateY(0); }

.reveal-left {
  opacity: 0;
  transform: translateX(-42px);
  transition: opacity 0.75s ease, transform 0.75s cubic-bezier(0.16,1,0.3,1);
}
.reveal-left.is-visible { opacity: 1; transform: translateX(0); }

.reveal-right {
  opacity: 0;
  transform: translateX(42px);
  transition: opacity 0.75s ease, transform 0.75s cubic-bezier(0.16,1,0.3,1);
}
.reveal-right.is-visible { opacity: 1; transform: translateX(0); }

.reveal-scale {
  opacity: 0;
  transform: scale(0.93);
  transition: opacity 0.75s ease, transform 0.75s cubic-bezier(0.16,1,0.3,1);
}
.reveal-scale.is-visible { opacity: 1; transform: scale(1); }

/* Stagger delays */
.delay-1 { transition-delay: 0.10s; }
.delay-2 { transition-delay: 0.20s; }
.delay-3 { transition-delay: 0.30s; }
.delay-4 { transition-delay: 0.40s; }
.delay-5 { transition-delay: 0.50s; }
.delay-6 { transition-delay: 0.60s; }