/**
 * WAMOCO — Colors & Type
 * Single source of truth for building against the Wamoco brand.
 * Verified against the production CSS of wamoco.de.
 */

/* ---------- Web fonts ----------
   Brand-supplied variable fonts live in ./fonts/. Google Fonts is kept as a
   fallback via the unicode-range-free declarations below so previews still
   render if the woff2 files aren't colocated.
*/
@font-face {
  font-family: "Funnel Display";
  src: url("../css/fonts/funneldisplay-variablefont_wght-webfont.woff2") format("woff2-variations"),
       url("../css/fonts/funneldisplay-variablefont_wght-webfont.woff2") format("woff2");
  font-weight: 300 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Funnel Sans";
  src: url("../css/fonts/funnelsans-variablefont_wght-webfont.woff2") format("woff2-variations"),
       url("../css/fonts/funnelsans-variablefont_wght-webfont.woff2") format("woff2");
  font-weight: 300 800;
  font-style: normal;
  font-display: swap;
}
/* Optional Google-Fonts fallback — uncomment if the woff2 files aren't shipped:
   <link href="https://fonts.googleapis.com/css2?family=Funnel+Display:wght@300..800&family=Funnel+Sans:wght@300..800&display=swap" rel="stylesheet">
*/

:root {
  /* ---------- Colors (base) ---------- */
  --wamoco-navy:  #000046;  /* primary surface */
  --wamoco-blue:  #0000FF;  /* links on light, gradient end */
  --wamoco-cyan:  #03FFFF;  /* accent / interaction */
  --wamoco-ice:   #E5FFFF;  /* invert surface, inputs */
  --wamoco-amber: #FFD371;  /* sparse warm highlight */
  --wamoco-white: #FFFFFF;

  /* Semantic colors (foreground / background / accent) */
  --bg:            var(--wamoco-navy);
  --bg-invert:     var(--wamoco-ice);
  --fg:            var(--wamoco-white);
  --fg-invert:     var(--wamoco-navy);
  --fg-muted:      rgba(255,255,255,.72);
  --fg-muted-on-light: rgba(0,0,70,.72);
  --accent:        var(--wamoco-cyan);
  --accent-strong: var(--wamoco-blue);
  --link-on-dark:  var(--wamoco-cyan);
  --link-on-light: var(--wamoco-blue);
  --overlay-light: rgba(255,255,255,.9);
  --border-accent: var(--wamoco-cyan);

  /* Signature gradient (header + footer) */
  --wamoco-gradient: linear-gradient(90deg, #000046 0%, #0000FF 100%);

  /* ---------- Type ---------- */
  --font-display: "Funnel Display", "Helvetica Neue", Arial, sans-serif;
  --font-body:    "Funnel Sans", "Helvetica Neue", Arial, sans-serif;

  /* Desktop scale */
  --fs-h1: 40px;   --lh-h1: 50px;
  --fs-h2: 40px;   --lh-h2: 50px;   /* intentional: H1 == H2 */
  --fs-h3: 32px;   --lh-h3: 36px;
  --fs-h4: 24px;   --lh-h4: 30px;
  --fs-body: 20px; --lh-body: 30px;
  --fs-footer-head: 24px;
  --fs-footer: 18px;
  --fs-legal: 16px;
  --fs-button: 20px;
  --fs-tag: 16px;
  --fs-input: 18px;

  /* Mobile ≤ 640 */
  --fs-h1-m: 30px; --lh-h1-m: 30px;
  --fs-h2-m: 30px;
  --fs-h3-m: 30px;
  --fs-h4-m: 24px;
  --fs-body-m: 16px; --lh-body-m: 25px;
  --fs-button-m: 16px;

  /* ---------- Spacing (20px grid) ---------- */
  --sp-xs: 5px;
  --sp-sm: 10px;
  --sp-md: 15px;
  --sp-lg: 20px;
  --sp-xl: 40px;
  --sp-2xl: 70px;
  --sp-3xl: 80px;
  --sp-4xl: 150px;

  /* ---------- Containers ---------- */
  --c-standard: 1160px;
  --c-wide:     1440px;
  --c-slider:   1020px;
  --c-teaser:   1240px;
  --c-text:      890px;
  --pad:   40px;
  --pad-m: 20px;

  /* ---------- Components ---------- */
  --btn-h: 48px;   --btn-h-m: 40px;  --btn-r: 24px;  --btn-px: 30px;
  --tag-h: 30px;   --tag-r: 15px;    --tag-px: 20px;
  --input-h: 60px; --textarea-h: 200px;
  --header-h: 90px;

  /* ---------- Signature corners (always ONE corner, always BOTTOM) ---------- */
  --r-header:   90px;  /* only the header container */
  --r-lg:       85px;  /* teaser-list images */
  --r-md:       75px;  /* standard: images, slider captions */

  /* ---------- Motion ---------- */
  --t-fast:   0.3s ease-out;
  --t-medium: 0.4s cubic-bezier(0.23, 1, 0.32, 1);
  --t-slow:   0.7s ease-out;

  /* ---------- Breakpoints (for media-queries reference) ---------- */
  --bp-xs: 480px; --bp-sm: 540px; --bp-mobile: 640px;
  --bp-tablet: 768px; --bp-medium: 959px;
  --bp-nav: 1160px; --bp-desktop: 1279px;
}

/* ===== Base element styles ===== */
html, body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2 { font-family: var(--font-display); font-size: var(--fs-h1); line-height: var(--lh-h1); margin: 0; font-weight: 400; }
h3    { font-family: var(--font-display); font-size: var(--fs-h3); line-height: var(--lh-h3); margin: 0; font-weight: 400; }
h4    { font-family: var(--font-display); font-size: var(--fs-h4); line-height: var(--lh-h4); margin: 0; font-weight: 400; }
p     { font-family: var(--font-body); font-size: var(--fs-body); line-height: var(--lh-body); margin: 0 0 var(--sp-lg); }

a { color: var(--link-on-light); transition: var(--t-fast); text-decoration: none; }
a:hover { color: var(--accent); }

/* On dark surfaces, links are cyan + underlined */
.on-dark a, .content.dark a { color: var(--link-on-dark); text-decoration: underline; }

/* ===== Semantic helpers ===== */
.surface-dark  { background: var(--wamoco-navy); color: var(--wamoco-white); }
.surface-light { background: var(--wamoco-ice);  color: var(--wamoco-navy); }
.surface-gradient { background: var(--wamoco-gradient); color: var(--wamoco-white); }

.corner-br-lg { border-bottom-right-radius: var(--r-lg); overflow: hidden; }
.corner-br-md { border-bottom-right-radius: var(--r-md); overflow: hidden; }
.corner-bl-md { border-bottom-left-radius:  var(--r-md); overflow: hidden; }
.corner-header { border-bottom-right-radius: var(--r-header); overflow: hidden; }

@media (max-width: 640px) {
  body { font-size: var(--fs-body-m); line-height: var(--lh-body-m); }
  h1, h2 { font-size: var(--fs-h1-m); line-height: var(--lh-h1-m); }
  h3    { font-size: var(--fs-h3-m); line-height: var(--lh-h1-m); }
  h4    { font-size: var(--fs-h4-m); line-height: 30px; }
  p     { font-size: var(--fs-body-m); line-height: var(--lh-body-m); }
}

/* ===== Buttons ===== */
.btn, .btn-primary {
  display: inline-flex; align-items: center; justify-content: center;
  height: var(--btn-h); padding: 0 var(--btn-px);
  font-family: var(--font-body); font-size: var(--fs-button);
  font-weight: 700; text-transform: uppercase; letter-spacing: 0;
  border-radius: var(--btn-r);
  background: var(--wamoco-navy); color: var(--wamoco-white);
  border: 1px solid var(--wamoco-cyan);
  text-decoration: none; cursor: pointer;
  transition: var(--t-fast);
}
.btn:hover, .btn-primary:hover { background: var(--wamoco-cyan); color: var(--wamoco-navy); }

.btn-transparent {
  background: transparent; color: var(--wamoco-navy);
  border: 1px solid var(--wamoco-navy);
}
.btn-transparent:hover { background: var(--wamoco-cyan); color: var(--wamoco-navy); }

@media (max-width: 768px) {
  .btn, .btn-primary, .btn-transparent {
    height: var(--btn-h-m); font-size: var(--fs-button-m); padding: 0 var(--btn-px);
  }
}

/* ===== Tag ===== */
.tag {
  display: inline-flex; align-items: center;
  height: var(--tag-h); padding: 0 var(--tag-px);
  font-family: var(--font-body); font-size: var(--fs-tag);
  font-weight: 700; text-transform: uppercase;
  border-radius: var(--tag-r);
  background: var(--wamoco-navy); color: var(--wamoco-white);
  border: 1px solid var(--wamoco-cyan);
  transition: var(--t-fast); cursor: pointer; text-decoration: none;
}
.tag:hover { background: var(--wamoco-cyan); color: var(--wamoco-navy); }

/* ===== Inputs ===== */
.input, .textarea {
  width: 100%; border: 0; background: var(--wamoco-ice); color: var(--wamoco-navy);
  font-family: var(--font-body); font-size: var(--fs-input);
  padding: 0 0 0 var(--sp-lg);
}
.input   { height: var(--input-h); }
.textarea { height: var(--textarea-h); padding: 10px 0 0 var(--sp-lg); resize: vertical; }
.input:focus, .textarea:focus { outline: 2px solid var(--wamoco-cyan); outline-offset: 2px; }