/* Fittsack — Farben, Rundungen, Schatten, Glas (Bento-Theme).

   Die eine Quelle für alles Sichtbare außer Bewegung (die steht in
   bewegung.css). Komponenten in style.css nehmen nur diese Werte. Hell und
   dunkel sind beide gestaltet: dunkel heißt tiefes Grün, kein Schwarz, und
   die Mahlzeitfarben werden zu dunklen Tönen derselben Richtung.

   Die alten Namen (--bg, --flaeche, --primaer …) bleiben und tragen die
   Bento-Werte, damit vorhandene Regeln mitgehen. */

:root {
  /* Grund und Flächen */
  --bg:            #f3f6ef;
  --verlauf-oben:  #fbfcf7;
  --flaeche:       #ffffff;   /* Kachelgrund: klar heller als der Seitengrund */
  --flaeche-2:     #f6f9f3;
  --flaeche-3:     #eaf0e6;
  --linie:         rgba(21, 35, 26, .08);
  --linie-stark:   rgba(21, 35, 26, .2);

  /* Schrift */
  --text:          #15231a;
  --text-2:        #56665b;
  --text-3:        #8a988e;

  /* Grün: handeln und „gut" */
  --primaer:       #2f8f5b;
  --primaer-dunkel:#257a4b;
  --primaer-hell:  #dcf2e3;
  --primaer-text:  #ffffff;

  --akzent:        #d98a2b;
  --akzent-hell:   #fbefdc;
  --rot:           #c9463e;   /* nur Fehler und der Mülleimer */
  --rot-hell:      #fbe3e0;
  --rot-text:      #8f2f29;
  --blau:          #3d64b4;   /* neutrale Hinweise, Büro */
  --blau-hell:     #e3ebfb;
  --blau-text:     #2b4f83;
  --gelb:          #9a6a0c;   /* zum Nachdenken, Cheatday */
  --gelb-hell:     #fdf0cc;
  --rosa:          #c94f78;   /* gern wieder */
  --rosa-hell:     #fbe3ec;
  --rosa-text:     #ffffff;

  /* Pastelltöne der Gerichte (ohne eigenes Foto) */
  --ton-0: #d8f0df; --ton-1: #fde3c8; --ton-2: #dde8fb;
  --ton-3: #f8dde7; --ton-4: #f1e9cc; --ton-5: #dcebd9;
  --ton-mix: 60%;             /* so viel Pastell, der Rest Kachelgrund */

  /* Mahlzeiten färben den Seitengrund (data-grund am body) */
  --fruehstueck-1: #ffeb99; --fruehstueck-2: #ffc891;
  --mittag-1:      #cbf5a9; --mittag-2:      #9ae9ca;
  --abend-1:       #b4ceff; --abend-2:       #ddbaf7;
  --nachtisch-1:   #ffbad2; --nachtisch-2:   #ffd9b0;

  /* Glas: nur, was über etwas schwebt */
  --glas:          rgba(255, 255, 255, .56);
  --glas-stark:    rgba(255, 255, 255, .84);
  --glas-rand:     rgba(255, 255, 255, .7);
  --glas-unschaerfe: blur(22px) saturate(1.7);
  --knopf:         rgba(255, 255, 255, .88);   /* runde Knöpfe, Chips, Felder */
  --schleier:      rgba(21, 40, 28, .16);       /* hinter einem Blatt */
  --schimmer:      rgba(255, 255, 255, .75);

  /* Schatten */
  --schatten:         0 1px 3px rgba(28, 58, 40, .06);
  --schatten-hoch:    0 12px 32px -14px rgba(28, 58, 40, .32);
  --schatten-klein:   0 6px 16px -8px rgba(28, 58, 40, .35);
  --schatten-kachel:  0 16px 32px -16px rgba(28, 58, 40, .42), 0 2px 6px rgba(28, 58, 40, .08);
  --kachel-rand:      rgba(255, 255, 255, .9);

  /* Fotos */
  --foto-mischung: multiply;  /* freigestellte Fotos verschmelzen mit dem Pastell */
  --teller: 0%;               /* dunkel steht das Gericht auf einem Teller */
  --maske-a: 72%; --maske-b: 100%;

  /* Toast */
  --toast:         #15231a;
  --toast-text:    #f3f6ef;
  --toast-gut:     #7fd3a5;
  --toast-hinweis: #a9c5f0;
  --toast-fehler:  #f19a93;

  /* Kochen: hell und frisch, Minz- bis Limettengrün */
  --kochen-1:       #dcf7e3;
  --kochen-2:       #f1fbcf;
  --kochen-text:    #1d7a45;
  --kochen-rand:    rgba(255, 255, 255, .95);
  --kochen-schatten: 0 16px 30px -14px rgba(40, 170, 90, .5);

  /* Rundungen */
  --radius-kachel:       28px;
  --radius-kachel-klein: 22px;
  --radius:              26px;   /* Karten mit Inhalt */
  --radius-klein:        14px;   /* Knöpfe, Felder */
  --radius-rund:         999px;

  /* Maße */
  --nav-hoehe:     62px;
  --nav-abstand:   14px;   /* so weit schwebt die Navigation über der Kante */
  /* Unterkante für alles, was über der Navigation steht (Toast, Leisten). */
  --ueber-nav:     calc(var(--nav-hoehe) + var(--nav-abstand) + env(safe-area-inset-bottom, 0px) + 10px);
  --leiste-breite: 232px;
  --inhalt-breite: 640px;

  --schrift: -apple-system, "SF Pro Text", "Segoe UI Variable", "Segoe UI",
             Inter, Roboto, "Helvetica Neue", system-ui, sans-serif;
  --schrift-zahl: -apple-system, "SF Pro Display", "Segoe UI Variable Display",
                  "Segoe UI", Inter, Roboto, system-ui, sans-serif;

  color-scheme: light;
}

/* Dunkel steht zweimal da, mit denselben Werten: einmal für den Knopf oben
   rechts (data-theme am <html>, vom Skript in base.html gesetzt), einmal für
   ein Gerät, das dunkel eingestellt ist und nichts gewählt hat.
   tests/test_oberflaeche.py prüft, dass beide gleich bleiben. */
:root[data-theme="dark"] {
  --bg:            #0e1511;
  --verlauf-oben:  #0e1511;
  --flaeche:       #19221d;
  --flaeche-2:     #1d2721;
  --flaeche-3:     #243029;
  --linie:         rgba(255, 255, 255, .08);
  --linie-stark:   rgba(255, 255, 255, .22);

  --text:          #e6eee8;
  --text-2:        #a2b1a7;
  --text-3:        #6d7c72;

  --primaer:       #5cc48a;
  --primaer-dunkel:#7fd3a5;
  --primaer-hell:  #1b3626;
  --primaer-text:  #08140d;

  --akzent:        #e09a44;
  --akzent-hell:   #3a2c18;
  --rot:           #f0857c;
  --rot-hell:      #3b1f1c;
  --rot-text:      #f3c1bd;
  --blau:          #8aaef0;
  --blau-hell:     #1d2a45;
  --blau-text:     #c3d6f3;
  --gelb:          #e8b84e;
  --gelb-hell:     #3a2f15;
  --rosa:          #e889a8;
  --rosa-hell:     #3a2030;
  --rosa-text:     #2a0f19;

  --ton-0: #223529; --ton-1: #3a2d1e; --ton-2: #22303f;
  --ton-3: #3a2830; --ton-4: #36321f; --ton-5: #2a332a;
  --ton-mix: 22%;

  --fruehstueck-1: #3a3116; --fruehstueck-2: #3d2818;
  --mittag-1:      #18331f; --mittag-2:      #11302a;
  --abend-1:       #19244a; --abend-2:       #2b1e46;
  --nachtisch-1:   #3d1b2c; --nachtisch-2:   #3a2916;

  --glas:          rgba(30, 40, 34, .55);
  --glas-stark:    rgba(22, 30, 26, .86);
  --glas-rand:     rgba(255, 255, 255, .09);
  --knopf:         rgba(46, 58, 51, .92);
  --schleier:      rgba(0, 0, 0, .42);
  --schimmer:      rgba(255, 255, 255, .08);

  --schatten:         0 1px 3px rgba(0, 0, 0, .35);
  --schatten-hoch:    0 12px 32px -14px rgba(0, 0, 0, .7);
  --schatten-klein:   0 6px 16px -8px rgba(0, 0, 0, .6);
  --schatten-kachel:  0 14px 30px -18px rgba(0, 0, 0, .8);
  --kachel-rand:      rgba(255, 255, 255, .09);

  --foto-mischung: normal;
  --teller: 100%;
  --maske-a: 62%; --maske-b: 67%;

  --toast:         #e6eee8;
  --toast-text:    #0e1511;
  --toast-gut:     #2f8f5b;
  --toast-hinweis: #3d64b4;
  --toast-fehler:  #c9463e;

  --kochen-1:       #173d27;
  --kochen-2:       #2c4519;
  --kochen-text:    #c4f2d0;
  --kochen-rand:    rgba(255, 255, 255, .12);
  --kochen-schatten: 0 16px 30px -14px rgba(60, 200, 110, .35);

  color-scheme: dark;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg:            #0e1511;
    --verlauf-oben:  #0e1511;
    --flaeche:       #19221d;
    --flaeche-2:     #1d2721;
    --flaeche-3:     #243029;
    --linie:         rgba(255, 255, 255, .08);
    --linie-stark:   rgba(255, 255, 255, .22);

    --text:          #e6eee8;
    --text-2:        #a2b1a7;
    --text-3:        #6d7c72;

    --primaer:       #5cc48a;
    --primaer-dunkel:#7fd3a5;
    --primaer-hell:  #1b3626;
    --primaer-text:  #08140d;

    --akzent:        #e09a44;
    --akzent-hell:   #3a2c18;
    --rot:           #f0857c;
    --rot-hell:      #3b1f1c;
    --rot-text:      #f3c1bd;
    --blau:          #8aaef0;
    --blau-hell:     #1d2a45;
    --blau-text:     #c3d6f3;
    --gelb:          #e8b84e;
    --gelb-hell:     #3a2f15;
    --rosa:          #e889a8;
    --rosa-hell:     #3a2030;
    --rosa-text:     #2a0f19;

    --ton-0: #223529; --ton-1: #3a2d1e; --ton-2: #22303f;
    --ton-3: #3a2830; --ton-4: #36321f; --ton-5: #2a332a;
    --ton-mix: 22%;

    --fruehstueck-1: #3a3116; --fruehstueck-2: #3d2818;
    --mittag-1:      #18331f; --mittag-2:      #11302a;
    --abend-1:       #19244a; --abend-2:       #2b1e46;
    --nachtisch-1:   #3d1b2c; --nachtisch-2:   #3a2916;

    --glas:          rgba(30, 40, 34, .55);
    --glas-stark:    rgba(22, 30, 26, .86);
    --glas-rand:     rgba(255, 255, 255, .09);
    --knopf:         rgba(46, 58, 51, .92);
    --schleier:      rgba(0, 0, 0, .42);
    --schimmer:      rgba(255, 255, 255, .08);

    --schatten:         0 1px 3px rgba(0, 0, 0, .35);
    --schatten-hoch:    0 12px 32px -14px rgba(0, 0, 0, .7);
    --schatten-klein:   0 6px 16px -8px rgba(0, 0, 0, .6);
    --schatten-kachel:  0 14px 30px -18px rgba(0, 0, 0, .8);
    --kachel-rand:      rgba(255, 255, 255, .09);

    --foto-mischung: normal;
    --teller: 100%;
    --maske-a: 62%; --maske-b: 67%;

    --toast:         #e6eee8;
    --toast-text:    #0e1511;
    --toast-gut:     #2f8f5b;
    --toast-hinweis: #3d64b4;
    --toast-fehler:  #c9463e;

    --kochen-1:       #173d27;
    --kochen-2:       #2c4519;
    --kochen-text:    #c4f2d0;
    --kochen-rand:    rgba(255, 255, 255, .12);
    --kochen-schatten: 0 16px 30px -14px rgba(60, 200, 110, .35);

    color-scheme: dark;
  }
}