@import "tailwindcss";

/* ============================================================
   Kitafreunde Regenbogen — "Warm Paper" Design System
   Picture-book warmth · rainbow as punctuation · hand-drawn soul
   ============================================================ */

@theme {
  /* --- Rainbow CI (exact aus dem Logoguide) --- */
  --color-rb-red:    #E8192C;
  --color-rb-orange: #F5820D;
  --color-rb-yellow: #F9C80E;
  --color-rb-green:  #00A651;
  --color-rb-cyan:   #00AEEF;
  --color-rb-blue:   #3B4FA8;
  --color-rb-violet: #6B3FA0;

  /* --- Brand roles --- */
  --color-primary:        #6B3FA0; /* violet — Marke, Text-Akzente, Links */
  --color-primary-dark:   #4D2C78;
  --color-primary-light:  #9B6FC8;
  --color-accent:         #F5820D; /* orange — Aktionen, Wärme */
  --color-accent-dark:    #D96E00;
  --color-accent-light:   #FDEBD3;

  /* --- Paper surfaces --- */
  --color-paper:      #FBF4E6; /* warmes Recyclingpapier — Haupt-BG */
  --color-paper-2:    #F4E9D4; /* getönt — alternierende Sektionen */
  --color-paper-3:    #2A2433; /* tiefe Tinten-Sektion */

  /* --- Back-compat Aliase (bestehende Seiten nutzen diese) --- */
  --color-surface:      #FBF4E6;
  --color-surface-alt:  #F4E9D4;
  --color-text:         #2A2433; /* warme Tinte mit Violett-Unterton */
  --color-text-muted:   #6E6679;
  --color-border:       #E7DAC2; /* warmer Papierrand */

  /* --- Typografie --- */
  --font-brand:   "Apex Brush", "Pacifico", cursive;         /* Signatur, sparsam */
  --font-display: "Fraunces", "Georgia", serif;              /* Headlines */
  --font-body:    "Hanken Grotesk", system-ui, sans-serif;   /* Fließtext, UI */

  /* --- Radii: organisch, weich --- */
  --radius-blob: 42% 58% 63% 37% / 41% 44% 56% 59%;
}

/* --- Marken-Webfont (lokal eingebettet) --- */
@font-face {
  font-family: "Apex Brush";
  src: url("/fonts/ApexBrush-Regular.woff2") format("woff2"),
       url("/fonts/ApexBrush-Regular.woff") format("woff");
  font-weight: normal;
  font-display: swap;
}

/* ============================================================
   Base
   ============================================================ */
@layer base {

html { scroll-behavior: smooth; }

body {
  font-family: var(--font-body);
  color: var(--color-text);
  background-color: var(--color-paper);
  /* subtile, warme Lichtwäsche in Regenbogenfarben */
  background-image:
    radial-gradient(60rem 40rem at 110% -10%, rgba(245,130,13,0.10), transparent 60%),
    radial-gradient(50rem 40rem at -10% 0%,  rgba(107,63,160,0.10), transparent 55%),
    radial-gradient(45rem 40rem at 50% 120%, rgba(0,174,239,0.08), transparent 60%);
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Papier-Korn — extrem subtil, über allem, ohne Interaktion */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: 0.5;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.05'/%3E%3C/svg%3E");
}
/* Inhalt liegt über dem Korn */
body > * { position: relative; z-index: 2; }

::selection { background: var(--color-rb-yellow); color: var(--color-text); }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 600;
  font-optical-sizing: auto;
  letter-spacing: -0.015em;
  line-height: 1.05;
  text-wrap: balance;
}

a { text-underline-offset: 3px; }

:focus-visible {
  outline: 3px solid var(--color-accent);
  outline-offset: 2px;
  border-radius: 4px;
}

} /* @layer base */

/* ============================================================
   Components
   ============================================================ */
@layer components {

/* Signatur-Eyebrow im Pinsel-Font */
.eyebrow {
  font-family: var(--font-brand);
  color: var(--color-accent);
  font-size: 1.35rem;
  line-height: 1;
  transform: rotate(-2deg);
  display: inline-block;
}

/* Buttons — Sticker-Pillen mit Tiefe */
.btn-primary {
  @apply inline-flex items-center justify-center gap-2 px-7 py-3.5 rounded-full font-semibold text-white;
  background: var(--color-accent);
  box-shadow: 0 6px 0 0 var(--color-accent-dark), 0 14px 24px -10px rgba(217,110,0,0.6);
  transition: transform .15s ease, box-shadow .15s ease, background .2s ease;
}
.btn-primary:hover {
  background: #ff8f1f;
  transform: translateY(-2px);
  box-shadow: 0 8px 0 0 var(--color-accent-dark), 0 20px 30px -10px rgba(217,110,0,0.6);
}
.btn-primary:active { transform: translateY(3px); box-shadow: 0 2px 0 0 var(--color-accent-dark); }

.btn-secondary {
  @apply inline-flex items-center justify-center gap-2 px-7 py-3.5 rounded-full font-semibold;
  color: var(--color-primary);
  background: #fff;
  border: 2px solid var(--color-primary);
  box-shadow: 0 6px 0 0 var(--color-primary);
  transition: transform .15s ease, box-shadow .15s ease, background .2s ease;
}
.btn-secondary:hover { transform: translateY(-2px); box-shadow: 0 8px 0 0 var(--color-primary); background: #fff; }
.btn-secondary:active { transform: translateY(3px); box-shadow: 0 2px 0 0 var(--color-primary); }

/* Sticker-Karte — leicht gekippt, richtet sich beim Hover auf */
.card,
.sticker {
  @apply rounded-3xl bg-white p-6;
  border: 1px solid var(--color-border);
  box-shadow: 0 1px 0 rgba(0,0,0,0.02), 0 18px 40px -24px rgba(42,36,51,0.35);
  transition: transform .25s cubic-bezier(.2,.8,.2,1), box-shadow .25s ease;
}
.card:hover,
.sticker:hover {
  transform: translateY(-6px) rotate(0deg);
  box-shadow: 0 28px 50px -24px rgba(42,36,51,0.45);
}
.tilt-l { transform: rotate(-1.4deg); }
.tilt-r { transform: rotate(1.4deg); }

/* Chip / Badge */
.chip {
  @apply inline-flex items-center gap-1.5 rounded-full px-3 py-1 text-xs font-semibold;
  background: var(--color-accent-light);
  color: var(--color-accent-dark);
}

/* Regenbogen-Balken */
.rainbow-bar {
  height: 6px;
  background: linear-gradient(90deg,
    var(--color-rb-red), var(--color-rb-orange), var(--color-rb-yellow),
    var(--color-rb-green), var(--color-rb-cyan), var(--color-rb-blue), var(--color-rb-violet));
}

/* Regenbogen-Text (Verlauf) */
.rainbow-text {
  background: linear-gradient(100deg,
    var(--color-rb-red), var(--color-rb-orange), var(--color-rb-green),
    var(--color-rb-cyan), var(--color-rb-violet));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* Hand-gezeichnete Unterstreichung (für Schlüsselwörter) */
.squiggle {
  position: relative;
  display: inline-block;
}
.squiggle::after {
  content: "";
  position: absolute;
  left: -2%;
  right: -2%;
  bottom: -0.12em;
  height: 0.34em;
  background: no-repeat center/100% 100% url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 18' preserveAspectRatio='none'%3E%3Cpath d='M2 12 C 40 4, 70 16, 100 9 S 165 3, 198 11' fill='none' stroke='%23F5820D' stroke-width='5' stroke-linecap='round'/%3E%3C/svg%3E");
}
.squiggle-violet::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 18' preserveAspectRatio='none'%3E%3Cpath d='M2 12 C 40 4, 70 16, 100 9 S 165 3, 198 11' fill='none' stroke='%236B3FA0' stroke-width='5' stroke-linecap='round'/%3E%3C/svg%3E");
}

/* Organischer Blob-Container (Bilder/Badges) */
.blob { border-radius: var(--radius-blob); }

/* Foto-„Klebeband" Look */
.photo-frame {
  background: #fff;
  padding: 0.6rem;
  border-radius: 1rem;
  box-shadow: 0 18px 40px -22px rgba(42,36,51,0.5);
}
.photo-frame img { border-radius: 0.6rem; display: block; width: 100%; height: 100%; object-fit: cover; }

/* Sektions-Helfer */
.section    { @apply py-20 px-4 max-w-6xl mx-auto; }
.section-sm { @apply py-12 px-4 max-w-6xl mx-auto; }

/* Fließtext (CMS-Body, lange Texte) — eigener Stil, kein Typography-Plugin nötig */
.prose { color: var(--color-text-muted); line-height: 1.75; }
.prose > * + * { margin-top: 1.05em; }
.prose h2 { font-family: var(--font-display); color: var(--color-text); font-size: 1.6rem; font-weight: 700; margin-top: 1.8em; line-height: 1.2; }
.prose h3 { font-family: var(--font-display); color: var(--color-text); font-size: 1.25rem; font-weight: 700; margin-top: 1.5em; }
.prose a { color: var(--color-primary); text-decoration: underline; text-underline-offset: 3px; }
.prose a:hover { color: var(--color-primary-dark); }
.prose strong { color: var(--color-text); font-weight: 700; }
.prose ul { list-style: disc; padding-left: 1.4em; }
.prose ol { list-style: decimal; padding-left: 1.4em; }
.prose li + li { margin-top: 0.4em; }
.prose blockquote { border-left: 4px solid var(--color-accent); padding-left: 1em; font-style: italic; color: var(--color-text); }
.prose img { border-radius: 1rem; }

} /* @layer components */

/* ============================================================
   Motion
   ============================================================ */

@keyframes float       { 0%,100%{ transform: translateY(0) } 50%{ transform: translateY(-14px) } }
@keyframes float-slow  { 0%,100%{ transform: translateY(0) rotate(0) } 50%{ transform: translateY(-22px) rotate(3deg) } }
@keyframes spin-slow   { to { transform: rotate(360deg) } }
@keyframes wiggle      { 0%,100%{ transform: rotate(-3deg) } 50%{ transform: rotate(3deg) } }
@keyframes fade-up     { from { opacity:0; transform: translateY(24px) } to { opacity:1; transform: translateY(0) } }
@keyframes pop-in      { 0%{ opacity:0; transform: scale(.8) } 100%{ opacity:1; transform: scale(1) } }

.anim-float      { animation: float 6s ease-in-out infinite; }
.anim-float-slow { animation: float-slow 9s ease-in-out infinite; }
.anim-spin-slow  { animation: spin-slow 26s linear infinite; }
.anim-wiggle     { animation: wiggle 4s ease-in-out infinite; }

/* Auftritt beim Laden, gestaffelt */
.reveal { opacity: 0; animation: fade-up .7s cubic-bezier(.2,.8,.2,1) forwards; }
.reveal.d1 { animation-delay: .08s; }
.reveal.d2 { animation-delay: .18s; }
.reveal.d3 { animation-delay: .30s; }
.reveal.d4 { animation-delay: .44s; }
.reveal.d5 { animation-delay: .58s; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: .001ms !important;
  }
  .reveal { opacity: 1; }
}
