/* =====================================================================
   Sentra Salon — Verkaufsseite: Designtokens

   ERZEUGT von werkzeuge/tokens-ableiten.mjs aus docs/design-tokens.css.
   Nicht von Hand aendern. Die Werte sind unveraendert uebernommen; die
   einzige Abweichung sind die Selektoren: die beiden Themen haengen hier
   an Klassen (.thema-kasse / .thema-backoffice) statt an html[data-thema],
   weil die Verkaufsseite beide Themen auf einer Seite zeigt — dunkel dort,
   wo das Produkt selbst zu sehen ist, hell fuer den Lesetext.

   Die nachgerechneten Kontrastwerte stehen in docs/design-tokens.css und
   docs/DESIGN.md Abschnitt 15. Die Seite selbst wird zusaetzlich gegen den
   gerenderten Baum gemessen: node werkzeuge/pruefe-kontrast.mjs
   ===================================================================== */

:root {
  /* ---- Abstaende (Vierer-Raster) ---------------------------------- */
  --a-1:   4px;   --a-2:   8px;   --a-3:  12px;   --a-4:  16px;
  --a-5:  20px;   --a-6:  24px;   --a-7:  32px;   --a-8:  40px;
  --a-9:  48px;   --a-10: 64px;

  /* ---- Trefferflaechen (Bestandsregel: lieber ein Ziel zu gross) --- */
  --ziel-min:      48px;  /* absolute Untergrenze jedes Bedienelements */
  --ziel-komfort:  56px;  /* Listenzeilen, Chips, Nebenhandlungen      */
  --taste-h:       64px;  /* Schaltflaeche                             */
  --taste-gross:   80px;  /* Hauptschaltflaeche, Numpad, Zahlarten     */

  /* ---- Kachel-Board ----------------------------------------------- */
  --kachel-min:     64px;  /* nicht verhandelbar                       */
  --kachel-daten:   78px;  /* ab hier Preis und Dauer auf der Kachel   */
  --kachel-max:    132px;  /* keine Plakate auf grossen Schirmen       */
  --kachel-abstand: 12px;
  --kachel-rahmen:   3px;  /* Innenrahmen, beide Zustaende             */
  --plakette:       32px;  /* Ordnungsnummer der gewaehlten Kachel     */

  /* ---- Grundraster der Kasse (1920 x 1080) ------------------------ */
  --kopf-h:    72px;
  --leiste-h:  88px;   /* Aktionsleiste unter dem Board               */
  --bon-b:    560px;   /* Bonstreifen: 2 x 272 Zahltasten + Abstand   */

  /* ---- Radien: der Radius sagt, was fuer ein Ding es ist ---------- */
  --r-taste:   8px;
  --r-kachel: 10px;
  --r-karte:  12px;
  --r-dialog: 16px;
  --r-chip:  999px;   /* entfernbares Objekt                          */
  --r-bon:     0px;   /* Papierstreifen, laeuft aus dem Bild          */

  /* ---- Schrift ---------------------------------------------------- */
  /* Atkinson Hyperlegible ist fuer Sehschwaeche entworfen: eindeutige
     1/l/I, 0 mit Strich, offene Punzen. Genau das braucht ein Schirm,
     der aus einem Meter Entfernung im Gegenlicht gelesen wird.
     Wird die Familie nicht gefunden, greift die System-Grotesk. */
  --sf-ui:  "Atkinson Hyperlegible Next", "Atkinson Hyperlegible",
            system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --sf-bon: ui-monospace, "SF Mono", "DejaVu Sans Mono", monospace;

  --t-9:   9px;   /* Untergrenze, nur im Kompaktfall der Kachel       */
  --t-11: 11px;   --t-13: 13px;   --t-15: 15px;   --t-17: 17px;
  --t-20: 20px;   --t-24: 24px;   --t-30: 30px;   --t-38: 38px;
  --t-48: 48px;   --t-64: 64px;   --t-88: 88px;

  --lh-eng:   1.05;   /* Betraege, Ziffern              */
  --lh-daten: 1.2;    /* Kacheln, Chips, Tabellen       */
  --lh-text:  1.4;    /* Fliesstext                     */
  --gw-text:  400;    --gw-halb: 600;    --gw-fett: 800;
  --sp-eng: -0.012em; --sp-weit: 0.01em;

  /* ---- Bewegung: nur als Antwort auf eine Handlung ---------------- */
  --zeit-schnell: 90ms;  --zeit-dialog: 160ms;
  --kurve: cubic-bezier(.2,.7,.3,1);

  /* ---- Toenung der ruhenden Kachel -------------------------------- */
  --toenung: 16%;
}

@media (prefers-reduced-motion: reduce) {
  :root { --zeit-schnell: 0ms; --zeit-dialog: 0ms; }
}


/* Dunkles Thema — Kasse auf der Sunmi Flex 3. Voreinstellung. */
.thema-kasse, :root {
  --fl-nacht: #12100E;
  --fl-app: #191713;
  --fl-board: #201D19;
  --fl-kachel: #262220;
  --fl-panel: #2D2924;
  --fl-bon: #322B25;
  --fl-hoch: #39352F;
  --li-zart: #4C4741;
  --li-feld: #837E77;
  --tx-1: #EFECE8;
  --tx-2: #BBB6B1;
  --tx-3: #A49E96;
  --ak-flaeche: #EFEAE3;
  --ak-flaeche-druck: #D6D0C7;
  --ak-text: #1B1815;
  --fokus: #FFFFFF;
  --fokus-abstand: 2px;
  --fokus-breite: 3px;
  --schleier: rgba(9,8,7,.72);
  --schatten-kachel: 0 2px 0 0 rgba(0,0,0,.5);
  --schatten-dialog: 0 24px 64px rgba(0,0,0,.6);
  --erfolg: #11813C;
  --erfolg-auf: #FFFFFF;
  --erfolg-text: #5FD887;
  --erfolg-flaeche: #293728;
  --warnung: #8A5A00;
  --warnung-auf: #FFFFFF;
  --warnung-text: #F5B93F;
  --warnung-flaeche: #3C311E;
  --gefahr: #C12535;
  --gefahr-auf: #FFFFFF;
  --gefahr-text: #FF8E90;
  --gefahr-flaeche: #452827;
  --info: #0075AB;
  --info-auf: #FFFFFF;
  --info-text: #79C9F6;
  --info-flaeche: #26353A;
  --kf-altrosa: #B14F69;
  --kf-altrosa-ruhe: #3C292C;
  --kf-rost: #B14A33;
  --kf-rost-ruhe: #3C2823;
  --kf-kupfer: #A75511;
  --kf-kupfer-ruhe: #3B2A1E;
  --kf-ocker: #94680F;
  --kf-ocker-ruhe: #382D1D;
  --kf-oliv: #6E751B;
  --kf-oliv-ruhe: #322F1F;
  --kf-farn: #42841E;
  --kf-farn-ruhe: #2A3220;
  --kf-moos: #377C4F;
  --kf-moos-ruhe: #293028;
  --kf-jade: #028473;
  --kf-jade-ruhe: #20322D;
  --kf-lagune: #0A819D;
  --kf-lagune-ruhe: #223134;
  --kf-stahl: #2F7BB0;
  --kf-stahl-ruhe: #273037;
  --kf-kobalt: #3664BE;
  --kf-kobalt-ruhe: #292D39;
  --kf-iris: #6E66AE;
  --kf-iris-ruhe: #322D37;
  --kf-amethyst: #8951AF;
  --kf-amethyst-ruhe: #362A37;
  --kf-fuchsia: #B93388;
  --kf-fuchsia-ruhe: #3E2531;
  --kf-auf-vollton: #FFFFFF;
}

/* Helles Thema — Backoffice im Browser. Gleiche Tokennamen, andere Werte. */
.thema-backoffice {
  --fl-papier: #FCFAF7;
  --fl-flaeche: #F5F2EE;
  --fl-feld: #EDE9E4;
  --li-zart: #D3CDC6;
  --li-feld: #918B85;
  --tx-1: #26221E;
  --tx-2: #605A52;
  --tx-3: #6B655D;
  --fl-nacht: #EDE9E4;
  --fl-app: #F5F2EE;
  --fl-board: #F5F2EE;
  --fl-kachel: #FCFAF7;
  --fl-panel: #FCFAF7;
  --fl-bon: #FCFAF7;
  --fl-hoch: #EDE9E4;
  --ak-flaeche: #26221E;
  --ak-flaeche-druck: #443E38;
  --ak-text: #FCFAF7;
  --fokus: #26221E;
  --schleier: rgba(38,34,30,.45);
  --schatten-kachel: 0 1px 0 0 rgba(38,34,30,.12);
  --schatten-dialog: 0 16px 48px rgba(38,34,30,.18);
  --erfolg: #11813C;
  --erfolg-auf: #FFFFFF;
  --erfolg-text: #0B6630;
  --erfolg-flaeche: #D9EBE0;
  --warnung: #8A5A00;
  --warnung-auf: #FFFFFF;
  --warnung-text: #6E4700;
  --warnung-flaeche: #ECE5D6;
  --gefahr: #C12535;
  --gefahr-auf: #FFFFFF;
  --gefahr-text: #A11B2A;
  --gefahr-flaeche: #F5DCDF;
  --info: #0075AB;
  --info-auf: #FFFFFF;
  --info-text: #005C87;
  --info-flaeche: #D6E9F2;
  --kf-altrosa: #B14F69;
  --kf-altrosa-ruhe: #F3E3E7;
  --kf-rost: #B14A33;
  --kf-rost-ruhe: #F3E2DE;
  --kf-kupfer: #A75511;
  --kf-kupfer-ruhe: #F1E4D9;
  --kf-ocker: #94680F;
  --kf-ocker-ruhe: #EEE7D9;
  --kf-oliv: #6E751B;
  --kf-oliv-ruhe: #E8E9DB;
  --kf-farn: #42841E;
  --kf-farn-ruhe: #E1EBDB;
  --kf-moos: #377C4F;
  --kf-moos-ruhe: #DFEAE3;
  --kf-jade: #028473;
  --kf-jade-ruhe: #D7EBE9;
  --kf-lagune: #0A819D;
  --kf-lagune-ruhe: #D8EBEF;
  --kf-stahl: #2F7BB0;
  --kf-stahl-ruhe: #DEEAF2;
  --kf-kobalt: #3664BE;
  --kf-kobalt-ruhe: #DFE6F5;
  --kf-iris: #6E66AE;
  --kf-iris-ruhe: #E8E7F2;
  --kf-amethyst: #8951AF;
  --kf-amethyst-ruhe: #ECE3F2;
  --kf-fuchsia: #B93388;
  --kf-fuchsia-ruhe: #F4DEEC;
  --kf-auf-vollton: #FFFFFF;
}

/* Die Seite steht auf dem hellen Thema; dunkle Abschnitte setzen .thema-kasse. */
html { color-scheme: light; }