/* ==========================================================================
   Schafi – Farb- und Typo-Tokens
   Stand: 12.11.2026
   Palette: Wald & Teal + Butter, Grün "Ein Drittel" (#19442f), Hintergrund #f6f5f1

   Regel: Komponenten nutzen NUR die Rollen-Tokens (Abschnitt 2),
   nie direkt die Palette (Abschnitt 1).
   Alle Kontrastwerte sind WCAG 2.x, gemessen gegen die genannte Fläche.
   ========================================================================== */

@import url("https://fonts.googleapis.com/css2?family=Fredoka:wght@500;600;700&family=Nunito:wght@400;600;700&display=swap");

:root {
  /* ---------------------------------------------------------------------
     1. Palette (Rohwerte – nicht direkt in Komponenten verwenden)
     --------------------------------------------------------------------- */
  --palette-cream-50:   #fbfbf9;
  --palette-cream-100:  #f6f5f1;
  --palette-cream-300:  #d8d6cf;
  --palette-ink-900:    #1f2a24;
  --palette-ink-600:    #5b6660;
  --palette-green-700:  #19442f;
  --palette-green-800:  #143626;
  --palette-green-900:  #102c1f;
  --palette-green-on-dark-muted: #d4e0d9;
  --palette-teal-500:   #3fb3a6;
  --palette-teal-100:   #dceee9;
  --palette-butter-400: #f7d56b;
  --palette-butter-300: #f9e090;
  --palette-butter-100: #fbebbd;
  --palette-white:      #ffffff;

  /* ---------------------------------------------------------------------
     2. Rollen
     --------------------------------------------------------------------- */

  /* Flächen */
  --color-bg:              var(--palette-cream-100); /* Seitenhintergrund */
  --color-surface:         var(--palette-cream-50);  /* Karten auf hellem Grund */
  --color-surface-raised:  var(--palette-white);     /* Sprechblase, Popover */
  --color-border:          var(--palette-cream-300); /* Trennlinien, Kartenrand (nur Deko) */

  /* Text auf hellem Grund */
  --color-text:            var(--palette-ink-900);   /* 13,6:1 auf bg */
  --color-text-muted:      var(--palette-ink-600);   /* 5,5:1 auf bg, 5,8:1 auf surface */

  /* Primär (Aktionen auf hellem Grund: Buttons, Links, Logo-Schriftzug, Häkchen) */
  --color-primary:         var(--palette-green-700); /* 10,1:1 auf bg */
  --color-primary-hover:   var(--palette-green-800);
  --color-primary-active:  var(--palette-green-900);
  --color-on-primary:      var(--palette-white);     /* 11,0:1 auf primary, 13,2:1 auf hover */

  /* Primär-Container (Info-Pillen wie "Android-App: noch 14 Tage") */
  --color-primary-container:    var(--palette-teal-100);
  --color-on-primary-container: var(--palette-green-700); /* 9,1:1 */

  /* Inverse Fläche ("Wo stehst du gerade?", Footer) – eigener Token, auch wenn gleicher Wert wie primary */
  --color-inverse-surface:       var(--palette-green-700);
  --color-inverse-surface-card:  rgba(255, 255, 255, 0.08); /* ergibt ca. #2b5340 */
  --color-on-inverse:            var(--palette-white);
  --color-on-inverse-muted:      var(--palette-green-on-dark-muted); /* 8,1:1 auf inverse, 6,4:1 auf Karte */

  /* Inverse Primär (Aktionen NUR auf dunklem Grund) */
  --color-inverse-primary:        var(--palette-butter-400); /* 7,7:1 auf inverse-surface */
  --color-inverse-primary-hover:  var(--palette-butter-300);
  --color-on-inverse-primary:     var(--palette-ink-900);    /* 11,4:1+ */

  /* Akzent (Hingucker: Badges "Neu"/"Beliebt", Markierung unter Wörtern) – nie als Button auf hellem Grund */
  --color-accent:          var(--palette-butter-400);
  --color-on-accent:       var(--palette-ink-900);
  --color-accent-soft:     var(--palette-butter-100);  /* Tag "Das bayerische Kartenspiel" */
  --color-on-accent-soft:  var(--palette-ink-900);     /* 12,5:1 */

  /* Illustration (Kreis hinter Schafi, App-Icon-Fläche) – reine Deko, kein Text darauf */
  --color-illustration:    var(--palette-teal-500);    /* 2,3:1 auf bg – nur dekorativ */

  /* Fokus */
  --focus-ring:            0 0 0 3px var(--color-bg), 0 0 0 5px var(--color-primary);
  --focus-ring-on-inverse: 0 0 0 3px var(--color-inverse-surface), 0 0 0 5px var(--color-inverse-primary);

  /* ---------------------------------------------------------------------
     3. Status-Farben (bewusst KEIN Butter: Gelb ist bei uns Akzent, nicht Warnung)
     Immer mit Icon + Text, nie nur Farbe.
     --------------------------------------------------------------------- */
  --color-success:       #276a40; /* 6,0:1 auf bg */
  --color-success-soft:  #e0efe4; /* success darauf 5,5:1 */
  --color-error:         #b3261e; /* 6,0:1 auf bg */
  --color-error-soft:    #f9e3e1; /* 5,3:1 */
  --color-warning:       #9a4a00; /* 5,7:1 auf bg – Amber-Braun, klar anders als Butter */
  --color-warning-soft:  #fbe6d4; /* 5,2:1 */
  --color-info:          #1f5f8b; /* 6,3:1 auf bg */
  --color-info-soft:     #e1edf5; /* 5,7:1 */

  /* ---------------------------------------------------------------------
     4. Typo, Radien, Abstände
     --------------------------------------------------------------------- */
  --font-heading: "Fredoka", system-ui, sans-serif;
  --font-body:    "Nunito", system-ui, sans-serif;

  --radius-sm:   8px;
  --radius-md:   12px;
  --radius-lg:   20px;
  --radius-pill: 999px;
}