/* BerlinWalk Brand Tokens
   Source of truth: BERLINWALK_BRAND_REFERENCE.md + brand/BerlinWalk_Brand_Guide_v1_2_revised.pdf
*/

@font-face {
  font-family: 'Montserrat';
  src: url('../assets/fonts/Montserrat-Regular.ttf') format('truetype');
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: 'Montserrat';
  src: url('../assets/fonts/Montserrat-Bold.ttf') format('truetype');
  font-weight: 700;
  font-display: swap;
}
@font-face {
  font-family: 'Montserrat';
  src: url('../assets/fonts/Montserrat-ExtraBold.ttf') format('truetype');
  font-weight: 800;
  font-display: swap;
}
@font-face {
  font-family: 'Merriweather';
  src: url('../assets/fonts/Merriweather-Regular.ttf') format('truetype');
  font-weight: 400;
  font-display: swap;
}

:root {
  /* Brand colors */
  --bw-green: #1B5E20;
  --bw-yellow: #FFE600;
  --bw-lime: #7CB342;
  --bw-light-green: #C5E1A5;
  --bw-cream: #FAFAF5;
  --bw-text: #212121;
  --bw-muted: #4E5A4E;
  --bw-white: #FFFFFF;
  --bw-red: #E63946;

  /* Surfaces */
  --bw-bg: var(--bw-cream);
  --bw-panel: var(--bw-white);
  --bw-border: #E6E8E2;
  --bw-border-strong: #BFC8B8;

  /* Typography */
  --bw-font-sans: 'Montserrat', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  --bw-font-serif: 'Merriweather', Georgia, 'Times New Roman', serif;

  /* Sizing */
  --bw-radius-sm: 6px;
  --bw-radius: 10px;
  --bw-radius-lg: 16px;
  --bw-shadow-sm: 0 1px 2px rgba(33, 33, 33, 0.06), 0 1px 1px rgba(33, 33, 33, 0.04);
  --bw-shadow: 0 4px 14px rgba(33, 33, 33, 0.08);

  /* Gradient (brand: yellow → lime, left → right) */
  --bw-gradient: linear-gradient(90deg, var(--bw-yellow) 0%, var(--bw-lime) 100%);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  font-family: var(--bw-font-sans);
  color: var(--bw-text);
  background: var(--bw-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4 {
  font-family: var(--bw-font-sans);
  font-weight: 800;
  color: var(--bw-green);
  margin: 0 0 0.5em;
  line-height: 1.2;
}

h1 { font-size: clamp(28px, 3vw, 36px); }
h2 { font-size: clamp(22px, 2.4vw, 28px); }
h3 { font-size: 20px; }
h4 { font-size: 16px; text-transform: uppercase; letter-spacing: 0.04em; }

p { line-height: 1.6; margin: 0 0 1em; }
a { color: var(--bw-green); text-decoration: none; }
a:hover { text-decoration: underline; }

.bw-kicker {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--bw-lime);
  margin-bottom: 8px;
}

.bw-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--bw-green);
  color: var(--bw-white);
  font-family: var(--bw-font-sans);
  font-weight: 700;
  font-size: 14px;
  padding: 10px 18px;
  border: none;
  border-radius: 999px;
  cursor: pointer;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  transition: transform .08s ease, background .15s ease;
}
.bw-btn:hover { background: #154a18; text-decoration: none; }
.bw-btn:active { transform: translateY(1px); }
.bw-btn--yellow { background: var(--bw-yellow); color: var(--bw-green); }
.bw-btn--yellow:hover { background: #f5dc00; }
.bw-btn--ghost {
  background: transparent;
  color: var(--bw-green);
  border: 1.5px solid var(--bw-green);
}
.bw-btn--ghost:hover { background: var(--bw-green); color: var(--bw-white); }
.bw-btn--sm { padding: 6px 12px; font-size: 12px; }

.bw-card {
  background: var(--bw-panel);
  border: 1px solid var(--bw-border);
  border-radius: var(--bw-radius);
  padding: 24px;
  box-shadow: var(--bw-shadow-sm);
}

.bw-chip {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--bw-light-green);
  color: var(--bw-green);
  font-size: 12px;
  font-weight: 700;
}

.bw-input,
.bw-textarea,
.bw-select {
  width: 100%;
  font-family: var(--bw-font-sans);
  font-size: 14px;
  padding: 10px 12px;
  border: 1px solid var(--bw-border-strong);
  border-radius: var(--bw-radius-sm);
  background: var(--bw-white);
  color: var(--bw-text);
}
.bw-input:focus,
.bw-textarea:focus,
.bw-select:focus {
  outline: none;
  border-color: var(--bw-green);
  box-shadow: 0 0 0 3px rgba(27, 94, 32, 0.15);
}
.bw-textarea { min-height: 120px; resize: vertical; }
.bw-label {
  display: block;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--bw-muted);
  margin-bottom: 6px;
}