/* ==========================================================================
   Ba the Bear · Designsystem „Bas Lächeln“ · tokens.css
   EINZIGE Quelle aller Werte (Farben, Schrift, Maße). Präfix --bb-.
   Version 0.2.0 · Stand 2026-10-05
   ========================================================================== */

@font-face { font-family: "Fredoka"; font-style: normal; font-weight: 600; font-display: swap;
  src: url("fonts/fredoka-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Fredoka"; font-style: normal; font-weight: 700; font-display: swap;
  src: url("fonts/fredoka-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family: "Nunito"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("fonts/nunito-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Nunito"; font-style: italic; font-weight: 400; font-display: swap;
  src: url("fonts/nunito-latin-400-italic.woff2") format("woff2"); }
@font-face { font-family: "Nunito"; font-style: normal; font-weight: 700; font-display: swap;
  src: url("fonts/nunito-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family: "Nunito"; font-style: normal; font-weight: 800; font-display: swap;
  src: url("fonts/nunito-latin-800-normal.woff2") format("woff2"); }

:root {
  /* --- Grundfarben (Rollen) --- */
  --bb-tinte: #2F2A26;          /* Text, Wortmarke, Standard-Button */
  --bb-text-2: #5A524B;         /* Nebentext */
  --bb-text-3: #6B625A;         /* Bildunterschrift, Metadaten */
  --bb-signal: #C42236;         /* Herz-Rot: Bas Herz. Genau ein Haupt-CTA, Links, Lächel-Linie unter Titeln */
  --bb-signal-tief: #9E1A2B;    /* Hover/aktiv des Signals */
  --bb-auf-signal: #FFFFFF;     /* Text auf Herz-Rot */
  --bb-papier: #F7F2E9;         /* Creme: Seitengrund */
  --bb-flaeche: #EEE5D7;        /* Flächen, Zitate, Felder */
  --bb-sofa: #A63D27;           /* Sofa-Rost: Titeltafeln, Kanalbanner, Fuß. Nie für kleinen Text */
  --bb-auf-sofa: #FBF7F0;       /* Text auf Sofa-Rost */
  --bb-linie: #DDD3C4;          /* Trennlinien, Feldränder */
  --bb-fokus: #1F6FD1;          /* Fokusring (nur Barrierefreiheit) */
  --bb-erfolg: #2F6B3A;
  --bb-warnung: #9A4C17;
  --bb-creme-fest: #F7F2E9;     /* schaltet im Dunkelmodus NICHT um: Grund für Logo-Darstellung, Profilkreis */
  --bb-auf-creme-fest: #2F2A26;     /* Text auf --bb-creme-fest in beiden Modi */

  /* --- Bas Gesicht (Illustration, nie Text) · honig-beige wie Ba früher (2015); entschieden vom Kind, 05.10.2026.
     Die Videos zeigen Ba weiterhin wie heute (gealtert grau), das Logo zeigt ihn in seinen ursprünglichen Farben. --- */
  --bb-fell: #CDA06F;
  --bb-fell-dunkel: #B08452;    /* Ohren außen */
  --bb-kahl: #E4CCA6;           /* Glatze und kahle Stellen über den Augen: Erkennungsmerkmal */
  --bb-schnauze: #E8D5B6;
  --bb-ohr: #DEC197;            /* Ohr innen */
  --bb-nase: #87593F;
  --bb-mund: #2C2521;           /* Augen, gestickter Mund */

  /* --- Figurenfarben: nur im Kontext der jeweiligen Figur (Thumbnail, Figurenseite) --- */
  --bb-fig-teddy: #22305A;      /* Halstuch mit Sternen */
  --bb-fig-knuffel: #B3122E;    /* rote Schleife (dunkler als Herz-Rot, nie als Signal) */
  --bb-fig-mimmi: #3E8E5A;      /* grünes Halstuch */
  --bb-fig-hasi: #9DBCD3;       /* hellblauer Schmusetuch-Körper */
  --bb-fig-elmo: #E6D6AE;       /* Strickpulli */
  --bb-fig-ein: #EFE6D2;
  --bb-fig-urlaubbaer: #FAF8F3;
  --bb-fig-plueschi: #F2EEE6;

  /* --- Schrift --- */
  --bb-schrift-display: "Fredoka", "Nunito", system-ui, sans-serif;
  --bb-schrift-text: "Nunito", system-ui, -apple-system, "Segoe UI", sans-serif;
  --bb-groesse-1: clamp(2.6rem, 1.6rem + 4.2vw, 5rem);    /* Hero, Wortmarke als Text */
  --bb-groesse-2: clamp(1.9rem, 1.4rem + 2.1vw, 3rem);    /* Abschnittstitel */
  --bb-groesse-3: clamp(1.35rem, 1.15rem + 0.9vw, 1.8rem);/* Untertitel */
  --bb-groesse-text: clamp(1.06rem, 1rem + 0.25vw, 1.2rem);
  --bb-groesse-klein: 0.92rem;
  --bb-zeile: 1.55;

  /* --- Form --- */
  --bb-raster: 4px;
  --bb-abstand-1: 8px; --bb-abstand-2: 16px; --bb-abstand-3: 24px; --bb-abstand-4: 40px; --bb-abstand-5: 72px;
  --bb-radius-feld: 12px;
  --bb-radius-flaeche: 20px;
  --bb-radius-knopf: 999px;
  --bb-strich: 2px;
  --bb-laecheln-tiefe: 14%;     /* Wölbung der Lächel-Unterkante (Signatur) */
  --bb-laecheln-strich: 5px;    /* Stärke der Lächel-Linie */
  --bb-schatten: none;          /* keine Schatten */
  --bb-dauer: 180ms;
  --bb-touch: 48px;
}

/* Dunkel: „Gute Nacht“ – Abendlicht im Wohnzimmer */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bb-tinte: #F4EEE4; --bb-text-2: #D2C9BD; --bb-text-3: #B9AFA3;
    --bb-signal: #FF8593; --bb-signal-tief: #FFB0B9; --bb-auf-signal: #1E1A17;
    --bb-papier: #1E1A17; --bb-flaeche: #2A2420; --bb-sofa: #7A2C1C; --bb-auf-sofa: #FBF7F0;
    --bb-linie: #4A413A; --bb-fokus: #7FB2FF; --bb-erfolg: #8FD19E; --bb-warnung: #F2B27A;
  }
}
:root[data-theme="dark"] {
  --bb-tinte: #F4EEE4; --bb-text-2: #D2C9BD; --bb-text-3: #B9AFA3;
  --bb-signal: #FF8593; --bb-signal-tief: #FFB0B9; --bb-auf-signal: #1E1A17;
  --bb-papier: #1E1A17; --bb-flaeche: #2A2420; --bb-sofa: #7A2C1C; --bb-auf-sofa: #FBF7F0;
  --bb-linie: #4A413A; --bb-fokus: #7FB2FF; --bb-erfolg: #8FD19E; --bb-warnung: #F2B27A;
}

@media (prefers-reduced-motion: reduce) {
  :root { --bb-dauer: 0ms; }
}