/* Chazon Kids 2.0 · Honiglicht Tokens (v2 · neuer Stand)
   ---------------------------------------------------------------
   Koexistiert mit assets/css/tokens.css (v1 · --kids-*).
   Diese Datei: --ck-* Prefix, :root scoped.
   Palette: warm-earth + ein iridescent Prisma-Akzent.
   Typo:    Fraunces · Inter · Caveat · JetBrains Mono.
   Springs: snap · settle · breath · page.
   --------------------------------------------------------------- */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600&family=Inter:wght@400;500;600&family=Caveat:wght@500&family=JetBrains+Mono:wght@400&display=swap');

:root {
  /* — Palette (Honiglicht) — */
  --ck-ground:        hsl(36  28% 94%);
  --ck-primary:       hsl(28  62% 52%);
  --ck-lift:          hsl(152 24% 38%);
  --ck-ink:           hsl(220 22% 18%);
  --ck-glow:          hsl(48  92% 72%);
  --ck-ground-deep:   hsl(28  18% 12%);
  --ck-accent-rose:   hsl(8   58% 68%);
  --ck-accent-sky:    hsl(200 38% 64%);

  /* — Iridescent Focus Stops (Seifenblasenhaut, nie Pride-Flagge) — */
  --ck-focus-stop-1: hsl(48  72% 78%);
  --ck-focus-stop-2: hsl(8   58% 78%);
  --ck-focus-stop-3: hsl(280 36% 80%);
  --ck-focus-stop-4: hsl(200 48% 80%);
  --ck-focus-stop-5: hsl(152 32% 78%);
  --ck-focus-stop-6: hsl(48  72% 78%);

  /* — Typografie — */
  --ck-font-headline: 'Fraunces', 'Cambria', Georgia, serif;
  --ck-font-body:     'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --ck-font-display:  'Caveat', 'Marker Felt', cursive;
  --ck-font-mono:     'JetBrains Mono', ui-monospace, monospace;

  --ck-text-display:  clamp(2.5rem, 5vw + 1rem, 4.5rem);
  --ck-text-headline: clamp(1.5rem, 2vw + 0.8rem, 2.25rem);
  --ck-text-body:     1.0625rem;
  --ck-text-ui:       0.9375rem;
  --ck-text-micro:    0.8125rem;

  --ck-lh-display:  1.05;
  --ck-lh-headline: 1.15;
  --ck-lh-body:     1.55;
  --ck-lh-ui:       1.4;
  --ck-lh-micro:    1.35;

  /* — Spacing (8pt grid) — */
  --ck-s-1: 0.25rem;
  --ck-s-2: 0.5rem;
  --ck-s-3: 0.75rem;
  --ck-s-4: 1rem;
  --ck-s-5: 1.5rem;
  --ck-s-6: 2rem;
  --ck-s-7: 3rem;
  --ck-s-8: 4rem;

  /* — Radii — */
  --ck-r-card:   12px;
  --ck-r-button:  8px;
  --ck-r-input:   4px;
  --ck-r-pill:   9999px;

  /* — Schatten (warmer Tint, nie blaustichig) — */
  --ck-shadow-card: 0 1px 0 hsl(36 28% 88% / 0.8) inset, 0 1px 2px hsl(28 30% 20% / 0.12);
  --ck-shadow-lift: 0 1px 0 hsl(36 28% 88% / 0.6) inset, 0 4px 14px hsl(28 30% 20% / 0.12);

  /* — Springs (snap/settle/breath/page · stiffness damping) — */
  --ck-spring-snap:   180 22;
  --ck-spring-settle: 120 18;
  --ck-spring-breath:  60 14;
  --ck-spring-page:    90 16;
  --ck-dur-breath:    6.5s;
}

/* Plan-Seiten bekommen die volle Behandlung — body styling, type, focus.
   Auf der Live-Site (v1 mit --kids-*) hat dieser Block keinen Effekt,
   weil dort kein Element die hier definierten Eigenschaften erbt. */

body.ck-page {
  margin: 0;
  font-family: var(--ck-font-body);
  font-size: var(--ck-text-body);
  line-height: var(--ck-lh-body);
  color: var(--ck-ink);
  background:
    radial-gradient(ellipse at 30% 10%, hsl(48 80% 90% / 0.35), transparent 60%),
    radial-gradient(ellipse at 80% 90%, hsl(28 50% 88% / 0.30), transparent 50%),
    var(--ck-ground);
  background-attachment: fixed;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body.ck-page * { box-sizing: border-box; }

body.ck-page h1,
body.ck-page h2,
body.ck-page h3,
body.ck-page h4 {
  font-family: var(--ck-font-headline);
  color: var(--ck-ink);
  font-weight: 500;
  font-variation-settings: "opsz" 96;
  margin: 0;
}
body.ck-page h1 { font-size: var(--ck-text-display);  line-height: var(--ck-lh-display);  text-shadow: 0 1px 0 hsl(36 28% 88%); }
body.ck-page h2 { font-size: var(--ck-text-headline); line-height: var(--ck-lh-headline); }
body.ck-page h3 { font-size: 1.25rem; line-height: 1.3; }

body.ck-page p { margin: 0 0 var(--ck-s-5); max-width: 56ch; }

body.ck-page a {
  color: var(--ck-primary);
  text-decoration: none;
  transition: color 320ms cubic-bezier(.2,.7,.2,1);
}
body.ck-page a:hover { color: var(--ck-lift); }

body.ck-page code,
body.ck-page pre { font-family: var(--ck-font-mono); font-size: 0.9em; }

/* Iridescent Focus Ring — Seifenblasenhaut, nie Pride-Flagge */
body.ck-page *:focus-visible {
  outline: none;
  box-shadow:
    0 0 0 2px var(--ck-ground),
    0 0 0 4px hsl(28 50% 50% / 0.35),
    0 0 0 6px hsl(48 72% 78% / 0.30),
    0 0 0 8px hsl(8 58% 78% / 0.22),
    0 0 0 10px hsl(200 48% 80% / 0.18);
  border-radius: inherit;
}

@media (prefers-reduced-motion: reduce) {
  body.ck-page *, body.ck-page *::before, body.ck-page *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}