/* ==========================================================================
   Designsystem „Bommelmütze“ – Nico, der Esel mit der Bommelmütze
   Design Tokens · Version 1.1 · 2026-10-04
   Einzige Quelle der Wahrheit für Farben, Schrift, Abstände, Formen.
   Werte nur hier ändern – DESIGN.md, brandkit.html und nb.css lesen sie aus.
   Farbquelle: serie/01_stil-bibel.md §5 (Palette der Bilder).
   ========================================================================== */

@font-face { font-family: "Fraunces"; src: url("fonts/fraunces-latin-full-normal.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Fraunces"; src: url("fonts/fraunces-latin-full-italic.woff2") format("woff2"); font-weight: 100 900; font-style: italic; font-display: swap; }
@font-face { font-family: "Andika"; src: url("fonts/andika-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Andika"; src: url("fonts/andika-latin-400-italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Andika"; src: url("fonts/andika-latin-700-normal.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Andika"; src: url("fonts/andika-latin-700-italic.woff2") format("woff2"); font-weight: 700; font-style: italic; font-display: swap; }

:root {
  /* --- Farben: Basis ------------------------------------------------------ */
  --nb-blau:        #1E5BC6;  /* Nico-Blau: die Mütze. Bündchen, Bommel, genau ein Haupt-CTA, Links */
  --nb-blau-tief:   #17489F;  /* Hover/aktiv auf Nico-Blau, Lochrand, dunkle Rippe */
  --nb-blau-hauch:  #E3EBF8;  /* sehr helle Blaufläche, nur Auswahl/Markierung */
  --nb-rippe:       #3D7BE0;  /* Bommel-Hell: helle Rippe im Bündchen, Flausch. Nie Text */
  --nb-tinte:       #3A2E25;  /* Erdbraun: Text, Wortmarke, Standard-Button */
  --nb-tinte-2:     #57463A;  /* Hover auf Tinte */
  --nb-papier:      #F6EFE1;  /* Buchcreme: Seitengrund (nie reines Weiß) */
  --nb-flaeche:     #EDE2CB;  /* Heu: abgesetzte Flächen, Mützen-Karte, Zitate */
  --nb-weiss:       #FFFDF8;  /* nur Formularfelder, Passepartout */
  --nb-linie:       #D9CBB0;  /* Haarlinien, Trenner, Feldrahmen */
  --nb-text:        #3A2E25;
  --nb-text-2:      #574A40;  /* Fließtext sekundär */
  --nb-text-3:      #6B5C50;  /* Metadaten, Bildunterschriften */
  --nb-gold:        #F2C46B;  /* Morgengold: Licht, Leuchten, Stern. Nie Text, nie Button */
  --nb-gold-tief:   #D9A54A;  /* Ocker: Rand von Goldflächen */
  --nb-nacht:       #1D2B4F;  /* Nachtblau: Gute-Nacht-Flächen, Fußzeile */
  --nb-auf-nacht:   #F6EFE1;  /* Text, Links und Fokus auf Nachtblau */
  --nb-auf-nacht-2: #DDD5C6;  /* sekundärer Text, Etiketten, KI-Hinweis auf Nachtblau */
  --nb-bommel-nacht: #86ABF2;  /* Bommel auf Nachtblau (Logo-Regel), nie Text auf hellem Grund */
  --nb-auf-gold:    #3A2E25;  /* Text auf Morgengold (Plakette) */
  --nb-fell:        #9EA3AB;  /* Silbergrau: nur Illustration (Ohren der Bildmarke) */
  --nb-erfolg:      #356A31;  /* Wiesengrün dunkel: Bestätigung */
  --nb-warnung:     #9A4C17;
  --nb-fokus:       #1E5BC6;
  --nb-auf-blau:    #FFFFFF;  /* Text auf Nico-Blau (Button) */

  /* --- Typografie --------------------------------------------------------- */
  --nb-font-display: "Fraunces", Georgia, "Times New Roman", serif;
  --nb-font-text:    "Andika", "Verdana", "Segoe UI", system-ui, sans-serif;
  --nb-display-achsen: "SOFT" 100, "WONK" 0;   /* weiche Bilderbuch-Serife, keine Wackel-Buchstaben */

  --nb-fs-mega:  clamp(2.75rem, 1.5rem + 5vw, 5.5rem);   /* ein Claim pro Seite */
  --nb-fs-h1:    clamp(2.25rem, 1.6rem + 2.6vw, 3.5rem);
  --nb-fs-h2:    clamp(1.75rem, 1.4rem + 1.4vw, 2.5rem);
  --nb-fs-h3:    1.4375rem;
  --nb-fs-lead:  1.3125rem;
  --nb-fs-body:  1.125rem;   /* 18px: Eltern und Großeltern lesen mit */
  --nb-fs-small: 0.9375rem;
  --nb-fs-label: 0.8125rem;

  --nb-lh-tight: 1.05;
  --nb-lh-head:  1.15;
  --nb-lh-body:  1.6;
  --nb-track-display: -0.015em;
  --nb-track-label:    0.08em;
  --nb-wght-mega: 800;
  --nb-wght-head: 700;

  /* --- Abstände (4er-Raster) --------------------------------------------- */
  --nb-s-1: 4px;  --nb-s-2: 8px;  --nb-s-3: 12px; --nb-s-4: 16px;
  --nb-s-5: 24px; --nb-s-6: 32px; --nb-s-7: 48px; --nb-s-8: 64px;
  --nb-s-9: 96px; --nb-s-10: 128px;
  --nb-max-text: 64ch;
  --nb-max-page: 1160px;
  --nb-gutter: 16px;

  /* --- Form ----------------------------------------------------------------
     Gestrickt und weich: Flächen haben runde Ecken wie Wollstoff,
     die Mütze sitzt oben. Keine Schwebeschatten. */
  --nb-radius-1: 10px;     /* Felder, kleine Elemente */
  --nb-radius-2: 18px;     /* Mützen-Karte, Fotos, Medien */
  --nb-radius-voll: 999px; /* Buttons, Bommel */

  --nb-rippe-breite: 4px;          /* Breite einer Rippe im Bündchen */
  --nb-buendchen: 14px;            /* Höhe Rippbündchen Standard */
  --nb-buendchen-gross: 22px;      /* hervorgehoben, Hero */
  --nb-buendchen-fein: 8px;        /* Trenner, Druck */
  --nb-bommel: 34px;               /* Durchmesser Bommel Standard */
  --nb-bommel-gross: 48px;
  --nb-bommel-klein: 14px;         /* Aufzählung, Satzpunkt, Button */

  --nb-schatten: none;             /* bewusst: keine Schwebeschatten */
  --nb-strich: 2px;                /* Linien, Strichzeichnungen, Feldrahmen */
  --nb-strich-stark: 3px;          /* Fokus, Wollfaden */

  /* --- Breakpoints (nur Doku; in Media Queries als Zahl): 480px klein · 760px breit --- */

  /* --- Druck (A4, Rätselblatt, Ausmalbild) ------------------------------- */
  --nb-druck-text: 11.5pt;
  --nb-druck-klein: 9.5pt;
  --nb-druck-titel: 24pt;
  --nb-druck-rand: 15mm;
  --nb-druck-logo: 32mm;           /* Breite der Wortmarke auf A4 */

  /* --- Bewegung ----------------------------------------------------------- */
  --nb-dauer: 220ms;
  --nb-dauer-wippen: 700ms;        /* Bommel wippt einmal nach */
  --nb-ease: cubic-bezier(.2, .7, .2, 1);
  --nb-ease-feder: cubic-bezier(.34, 1.56, .64, 1);
}

/* --- Gute-Nacht-Modus (dunkel): Nachtblau wird Grund, Mütze leuchtet ------ */
@media screen and (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --nb-blau: #86ABF2; --nb-blau-tief: #A9C4F6; --nb-blau-hauch: #24365F; --nb-rippe: #5E8EE8;
    --nb-tinte: #F6EFE1; --nb-tinte-2: #FFFFFF;
    --nb-papier: #141D33; --nb-flaeche: #1D2B4F; --nb-weiss: #22335C; --nb-linie: #34466F;
    --nb-text: #F6EFE1; --nb-text-2: #DDD5C6; --nb-text-3: #BDB4A5;
    --nb-nacht: #0E1527; --nb-erfolg: #8CC98A; --nb-warnung: #F0A868;
    --nb-fokus: #86ABF2; --nb-auf-blau: #141D33;
  }
}
@media screen {
:root[data-theme="dark"] {
  color-scheme: dark;
  --nb-blau: #86ABF2; --nb-blau-tief: #A9C4F6; --nb-blau-hauch: #24365F; --nb-rippe: #5E8EE8;
  --nb-tinte: #F6EFE1; --nb-tinte-2: #FFFFFF;
  --nb-papier: #141D33; --nb-flaeche: #1D2B4F; --nb-weiss: #22335C; --nb-linie: #34466F;
  --nb-text: #F6EFE1; --nb-text-2: #DDD5C6; --nb-text-3: #BDB4A5;
  --nb-nacht: #0E1527; --nb-erfolg: #8CC98A; --nb-warnung: #F0A868;
  --nb-fokus: #86ABF2; --nb-auf-blau: #141D33;
}
}