/* ============================================================
   Kinderträume e.V. — Colors & Type
   Hand-drawn, warm, hopeful. Primary palette pulled from logo.
   ============================================================ */

/* ---------- Fonts ------------------------------------------- */

@font-face {
  font-family: 'Cabin Sketch';
  src: url('fonts/cabin-sketch-regular.woff2') format('woff2'),
       url('fonts/cabin-sketch-regular.woff')  format('woff');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Cabin Sketch';
  src: url('fonts/cabin-sketch-700.woff2') format('woff2'),
       url('fonts/cabin-sketch-700.woff')  format('woff');
  font-weight: 700; font-style: normal; font-display: swap;
}

@font-face {
  font-family: 'Kidprint MT Pro';
  src: url('fonts/KidprintMTPro-Regular.otf') format('opentype');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Kidprint MT Pro';
  src: url('fonts/KidprintMTPro-Bold.otf') format('opentype');
  font-weight: 700; font-style: normal; font-display: swap;
}

@font-face {
  font-family: 'Poppins';
  src: url('fonts/Poppins-Light.ttf') format('truetype');
  font-weight: 300; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Poppins';
  src: url('fonts/Poppins-Regular.ttf') format('truetype');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Poppins';
  src: url('fonts/Poppins-Italic.ttf') format('truetype');
  font-weight: 400; font-style: italic; font-display: swap;
}
@font-face {
  font-family: 'Poppins';
  src: url('fonts/Poppins-Medium.ttf') format('truetype');
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Poppins';
  src: url('fonts/Poppins-SemiBold.ttf') format('truetype');
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Poppins';
  src: url('fonts/Poppins-Bold.ttf') format('truetype');
  font-weight: 700; font-style: normal; font-display: swap;
}

/* ---------- Tokens ------------------------------------------ */

:root {
  /* ===========================================================
     BRAND PALETTE (official, supplied by Kinderträume)
     5 saturated brand colors used for primary brand expression.
     =========================================================== */
  --kt-blue:          #405E9B;   /* primary brand blue */
  --kt-green:         #277E00;   /* primary brand green */
  --kt-orange:        #F26100;   /* primary brand orange */
  --kt-magenta:       #A3005A;   /* primary brand magenta */
  --kt-yellow:        #E8BF3A;   /* primary brand yellow */

  /* Convenience alias — primary CTA uses orange (most energetic) */
  --kt-red:           var(--kt-orange);

  /* Hover/dark variants (~12% darker) */
  --kt-blue-dark:     #2F4779;
  --kt-green-dark:    #1B5800;
  --kt-orange-dark:   #C24E00;
  --kt-red-dark:      var(--kt-orange-dark);
  --kt-magenta-dark:  #7A0042;
  --kt-yellow-dark:   #C9A21E;

  /* Soft tints (alpha-mixed onto paper, ~12% strength) */
  --kt-blue-soft:     #E1E7F2;
  --kt-green-soft:    #DDEDD0;
  --kt-orange-soft:   #FCE0CC;
  --kt-red-soft:      var(--kt-orange-soft);
  --kt-magenta-soft:  #F1D4E3;
  --kt-yellow-soft:   #FAEFC9;

  /* ===========================================================
     POSTINGS PALETTE (softer set, social media + supporting UI)
     Used for backgrounds, illustrations, and story sections.
     =========================================================== */
  --kt-p-blue:        #2A67A3;   /* deep blue */
  --kt-p-orange:      #F7945E;   /* warm orange */
  --kt-p-peach:       #F9A875;   /* peach */
  --kt-p-yellow:      #F5D97B;   /* soft yellow */
  --kt-p-green:       #4E9C81;   /* sage green */
  --kt-p-lavender:    #B7A5E8;   /* lavender */
  --kt-p-teal:        #4AB8B6;   /* teal */
  --kt-p-cream:       #FDF6EE;   /* cream paper */
  --kt-p-skylight:    #D8E9F8;   /* soft sky */
  --kt-p-charcoal:    #333333;   /* deep neutral */

  /* Alias for sky (used in hero/scenic backgrounds) */
  --kt-sky:           var(--kt-p-skylight);
  --kt-sky-deep:      var(--kt-p-blue);

  /* ----- Brand imagery ---------------------------------------
     Signature photograph: rainbow balloons drifting up into a
     blue sky with white clouds. Used as a hero / flyer / section
     background across all Kinderträume materials. Keep it big,
     full-bleed, with white headline copy. */
  --kt-img-balloons:      url('assets/balloons-sky-1600.jpg');
  --kt-img-balloons-thumb: url('assets/balloons-sky-800.jpg'); 
  --kt-band-green:    var(--kt-p-green);   /* section band, sage */

  /* --- Neutrals --- */
  --kt-ink:           #1F2024;   /* near-black hand-letter ink */
  --kt-ink-2:         #3A3A40;
  --kt-ink-3:         #6B6B72;   /* muted body */
  --kt-ink-4:         #9A9AA0;   /* hint */
  --kt-line:          #E4E2DA;   /* divider / paper edge */
  --kt-paper:         #FDF6EE;   /* warm cream paper (postings cream) */
  --kt-paper-2:       #F7F1E1;   /* deeper cream tint (letter background) */
  --kt-white:         #FFFFFF;
  --kt-ink:           #333333;   /* postings charcoal — overrides earlier */

  /* --- Semantic foreground --- */
  --fg-1: var(--kt-ink);
  --fg-2: var(--kt-ink-2);
  --fg-3: var(--kt-ink-3);
  --fg-4: var(--kt-ink-4);
  --fg-on-color: var(--kt-white);
  --fg-link: var(--kt-red);
  --fg-link-hover: var(--kt-red-dark);

  /* --- Semantic background --- */
  --bg-page:   var(--kt-paper);
  --bg-card:   var(--kt-white);
  --bg-cream:  var(--kt-paper-2);
  --bg-tint:   var(--kt-sky);

  /* --- Semantic role --- */
  --color-primary:        var(--kt-orange);   /* CTA */
  --color-primary-hover:  var(--kt-orange-dark);
  --color-secondary:      var(--kt-blue);
  --color-accent:         var(--kt-yellow);
  --color-success:        var(--kt-green);
  --color-info:           var(--kt-blue);
  --color-warn:           var(--kt-orange);
  --color-emphasis:       var(--kt-magenta);  /* highlight nouns in body copy */

  /* --- Type families --- */
  --font-display: 'Cabin Sketch', 'Comic Sans MS', cursive;     /* hand-drawn headlines */
  --font-script:  'Kidprint MT Pro', 'Cabin Sketch', cursive;   /* logo / wordmark feel */
  --font-body:    'Poppins', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* --- Type scale --- */
  --fs-hero:   clamp(40px, 6vw, 72px);
  --fs-h1:     clamp(32px, 4.5vw, 52px);
  --fs-h2:     clamp(26px, 3.2vw, 38px);
  --fs-h3:     22px;
  --fs-h4:     18px;
  --fs-body:   16px;
  --fs-body-lg:18px;
  --fs-small:  14px;
  --fs-micro:  12px;

  --lh-tight: 1.1;
  --lh-snug:  1.25;
  --lh-body:  1.55;
  --lh-loose: 1.7;

  /* --- Spacing (8pt grid, with 4 + 6 micro stops) --- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;

  /* --- Radius --- */
  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 18px;
  --radius-pill: 999px;
  --radius-blob: 28px 22px 30px 18px / 22px 28px 18px 30px; /* organic */

  /* --- Shadow / Elevation --- */
  --shadow-sm:    0 1px 2px rgba(31, 32, 36, 0.06),
                  0 1px 1px rgba(31, 32, 36, 0.04);
  --shadow-md:    0 4px 10px rgba(31, 32, 36, 0.08),
                  0 2px 4px  rgba(31, 32, 36, 0.05);
  --shadow-lg:    0 12px 28px rgba(31, 32, 36, 0.14),
                  0 4px 10px  rgba(31, 32, 36, 0.06);
  /* Polaroid: tilt it with rotate() at the call site */
  --shadow-polaroid: 0 6px 14px rgba(0,0,0,.18),
                     0 2px 4px  rgba(0,0,0,.10);

  /* --- Border --- */
  --border-thin:  1px solid var(--kt-line);
  --border-card:  1px solid rgba(31,32,36,.06);
  --border-ink:   2px solid var(--kt-ink);

  /* --- Motion --- */
  --ease-out:  cubic-bezier(.2,.8,.2,1);
  --ease-soft: cubic-bezier(.4,0,.2,1);
  --dur-fast:   140ms;
  --dur-base:   220ms;
  --dur-slow:   420ms;
}

/* ---------- Semantic typography classes ---------------------- */

.kt-hero {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-hero);
  line-height: var(--lh-tight);
  color: var(--fg-1);
  letter-spacing: -.005em;
  text-wrap: balance;
}

.kt-h1 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-h1);
  line-height: var(--lh-tight);
  color: var(--fg-1);
  text-wrap: balance;
}

.kt-h2 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--fs-h2);
  line-height: var(--lh-snug);
  color: var(--fg-1);
  text-wrap: balance;
}

.kt-h3 {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--fs-h3);
  line-height: var(--lh-snug);
  color: var(--fg-1);
  letter-spacing: -.005em;
}

.kt-h4 {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--fs-h4);
  line-height: var(--lh-snug);
  color: var(--fg-1);
}

.kt-eyebrow {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--fs-micro);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--kt-red);
}

.kt-lead {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--fs-body-lg);
  line-height: var(--lh-loose);
  color: var(--fg-2);
  text-wrap: pretty;
}

.kt-body {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--fg-2);
  text-wrap: pretty;
}

.kt-small {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--fs-small);
  line-height: var(--lh-body);
  color: var(--fg-3);
}

.kt-micro {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: var(--fs-micro);
  line-height: 1.4;
  color: var(--fg-3);
}

/* Hand-lettered tagline / quote — feels like the logo wordmark */
.kt-tagline {
  font-family: var(--font-script);
  font-weight: 400;
  font-style: italic;
  color: var(--kt-ink);
  font-size: clamp(20px, 2.4vw, 28px);
  line-height: 1.3;
}

/* Inline emphasis used in flyers (red word inside body copy) */
.kt-em-red    { color: var(--kt-red); font-weight: 600; }
.kt-em-orange { color: var(--kt-orange); font-weight: 600; }
.kt-em-green  { color: var(--kt-green-dark); font-weight: 600; }

/* ---------- Element base --------------------------------------- */

html, body {
  background: var(--bg-page);
  color: var(--fg-1);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a {
  color: var(--fg-link);
  text-decoration-thickness: 1.5px;
  text-underline-offset: 3px;
  transition: color var(--dur-fast) var(--ease-out);
}
a:hover { color: var(--fg-link-hover); }

/* ---------- Brand imagery utilities ---------------------------
   Signature balloons-in-sky photograph. Use as hero/section bg.
   Three variants:
     .kt-balloons-bg        — image only, full bleed
     .kt-balloons-bg--scrim — same + dark scrim for white headlines
     .kt-balloons-bg--soft  — same + cream wash for body copy on top
   ------------------------------------------------------------- */

.kt-balloons-bg,
.kt-balloons-bg--scrim,
.kt-balloons-bg--soft {
  background-image: var(--kt-img-balloons);
  background-size: cover;
  background-position: center 40%;
  background-repeat: no-repeat;
  position: relative;
  isolation: isolate;
}

.kt-balloons-bg--scrim::before {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg,
    rgba(20,40,80,.10) 0%,
    rgba(20,40,80,.30) 60%,
    rgba(20,40,80,.55) 100%);
  z-index: 0;
  pointer-events: none;
}

.kt-balloons-bg--soft::before {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg,
    rgba(253,246,238,.55) 0%,
    rgba(253,246,238,.85) 80%,
    rgba(253,246,238,.95) 100%);
  z-index: 0;
  pointer-events: none;
}

.kt-balloons-bg > *,
.kt-balloons-bg--scrim > *,
.kt-balloons-bg--soft  > * { position: relative; z-index: 1; }


/* ---------- Logo lockups --------------------------------------
   The primary logo is built for LIGHT surfaces. On dark surfaces,
   use one of the variants below. The dark-mode rules:

     1.  PRIMARY on dark = .kt-logo--white (all-white silhouette).
     2.  Alt on dark     = wrap the original .kt-logo in .kt-logo-tile
                           (cream panel — keeps the full-color logo).
     3.  Accent on dark  = .kt-logo--yellow (warmer, for moments).

   For tight spaces (favicons, avatars, collapsed headers), use
   the mascot-only marks: .kt-logo-mark--white (primary), etc.
   --------------------------------------------------------------- */

.kt-logo,
.kt-logo-mark {
  display: inline-block;
  background: center/contain no-repeat;
  vertical-align: middle;
}
/* Default sizes — override with width/height in your own rule. */
.kt-logo       { width: 240px; aspect-ratio: 1240 / 821;
                 background-image: url('assets/logo_full.png'); }
.kt-logo-mark  { width: 80px;  aspect-ratio: 405 / 760;
                 background-image: url('assets/logo_figur.png'); }

/* Dark-surface silhouette variants — solid-color via CSS mask.
   Add ONE of these modifier classes to .kt-logo or .kt-logo-mark. */
.kt-logo--white,
.kt-logo--yellow,
.kt-logo--cream {
  background: none;
  -webkit-mask: url('assets/logo_full.png') center/contain no-repeat;
          mask: url('assets/logo_full.png') center/contain no-repeat;
}
.kt-logo-mark--white,
.kt-logo-mark--yellow,
.kt-logo-mark--cream {
  background: none;
  -webkit-mask: url('assets/logo_figur.png') center/contain no-repeat;
          mask: url('assets/logo_figur.png') center/contain no-repeat;
}
.kt-logo--white,
.kt-logo-mark--white  { background-color: #ffffff; }
.kt-logo--yellow,
.kt-logo-mark--yellow { background-color: var(--kt-yellow); }
.kt-logo--cream,
.kt-logo-mark--cream  { background-color: #f6ead0; }

/* Logo on a light tile — alt option for dark surfaces when keeping
   the full-color, hand-drawn logo intact matters. Wrap .kt-logo. */
.kt-logo-tile {
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--bg-card, #fdfaf3);
  border-radius: 18px;
  padding: 14px 22px;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.28);
}