/*
 * Terrazzo fuer die Shop-Seiten.
 *
 * Erzeugt aus designsystem/tokens.json. Dieselben Namen wie in der App
 * und auf der Verkaufsseite, damit Kundenkonto, Warenkorb und Kasse
 * nicht aussehen wie eine dritte Website.
 */

/* Die Schriften liegen dort, wohin das Importpaket sie legt:
 * /wp-content/uploads/jecky/schriften/. Das Plugin bringt sie nicht
 * selbst mit, sonst lieferte dieselbe Installation sie zweimal aus.
 * Ohne Importpaket greift die Ersatzkette, und die Seiten stehen in
 * der Systemschrift -- richtig in Farbe und Mass, nur nicht in
 * Figtree. */
@font-face{font-family:'Bricolage Grotesque';src:url('/wp-content/uploads/jecky/schriften/BricolageGrotesque-Variable.woff2') format('woff2');font-weight:200 800;font-style:normal;font-display:swap}
@font-face{font-family:'Figtree';src:url('/wp-content/uploads/jecky/schriften/Figtree-Variable.woff2') format('woff2');font-weight:300 900;font-style:normal;font-display:swap}
@font-face{font-family:'Figtree';src:url('/wp-content/uploads/jecky/schriften/Figtree-Italic-Variable.woff2') format('woff2');font-weight:300 900;font-style:italic;font-display:swap}

:root {
  /* Flaechen, hoechstens drei Stufen uebereinander */
  --surface: #f7f4ea;
  --surface-raised: #fffdf7;
  --stone: #ebe8d4;
  --sand: #ebd7c1;

  /* Linien statt Schatten */
  --line: #d9d3bd;
  --line-strong: #857f6c;

  /* Text, zwei Stufen */
  --ink: #012042;
  --ink-muted: #4a5a70;

  /* Marke, Signal, Gefahr */
  --navy: #012042;
  --orange: #ed7f02;
  --orange-hover: #cc720b;
  --orange-strong: #9a4b00;
  --orange-soft: #fbe3c4;
  --coral: #e8543f;
  --coral-strong: #b0301f;
  --coral-soft: #fadad3;
  --teal: #4b979c;
  --teal-hover: #40838b;
  --teal-strong: #1f6468;
  --teal-soft: #d5eaea;

  /* Schrift auf gefaerbten Flaechen. Auf Orange steht Navy, niemals Weiss. */
  --on-accent: #012042;
  --on-danger: #fffdf7;
  --surface-inverse: #012042;
  --ink-inverse: #ebe8d4;
  --focus: #012042;
  --link: #9a4b00;

  /* Schatten nur fuer Schwebendes: Menue, Dialog, Abspielleiste */
  --shadow-sm: 0 1px 2px #0120420f, 0 1px 3px #0120421a;
  --shadow-lg: 0 6px 12px #01204214, 0 16px 32px -4px #01204229;
  --focus-ring: 0 0 0 2px #f7f4ea, 0 0 0 4px #012042;

  /* Drei Werte, die nur die App hat, weil nur sie die Bauteile hat. Eigene */
  --leiste-grund: #fffdf7f2;
  --welle-gespielt: #0120426b;
  --welle-offen: #01204229;

  /* Der Abschnitt, der gerade laeuft. Teal und nicht Orange, weil Orange im System der einen Hauptaktion je Ansicht gehoert, und das ist der Abspielknopf. */
  --laeuft: var(--teal);
  --laeuft-hover: var(--teal-hover);
  --laeuft-soft: var(--teal-soft);
  --auf-laeuft: var(--on-accent);

  /* 4px-Raster */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;
  --space-28: 112px;

  /* Weich wie geschliffener Stein */
  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-xl: 32px;
  --radius-full: 9999px;

  /* Mindestmass fuer alles, was mit dem Daumen getroffen wird. Terrazzo kennt Knopfgroessen bis 52 px; in der Halle wird mit ausgestrecktem Arm getippt. */
  --ziel-min: 44px;
  --ziel-komfort: 56px;
  --ziel-kachel: 72px;

  /* Schriften liegen daneben, nicht bei Google */
  --schrift-display: 'Bricolage Grotesque', 'Figtree', system-ui, sans-serif;
  --schrift-text: 'Figtree', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* Schriftskala der Website. Nur die Groesse; Gewicht und Zeilenhoehe stehen in der Stufe. */
  --display-xl: clamp(40px, 6.6vw, 72px);
  --display-l: clamp(34px, 5vw, 56px);
  --h1: clamp(28px, 3.4vw, 40px);
  --h2: clamp(24px, 2.6vw, 30px);
  --h3: 22px;
  --lead: 20px;
  --body: 16px;
  --body-sm: 14px;
  --label: 14px;
  --caption: 12px;
  --augenbraue: 12px;

  /* Breiten. Standen bis zum 30.09. als nackte Zahl im Code. */
  --content-width: 1180px;
  --gutter: clamp(1.2rem, 4vw, 2.4rem);
  --lesebreite: 60ch;
}

:root[data-theme="dark"] {
  /* Flaechen, hoechstens drei Stufen uebereinander */
  --surface: #0b1a2c;
  --surface-raised: #13253b;
  --stone: #1a2e46;
  --sand: #2e2620;

  /* Linien statt Schatten */
  --line: #253a54;
  --line-strong: #6a7f9c;

  /* Text, zwei Stufen */
  --ink: #ebe8d4;
  --ink-muted: #a7b1c0;

  /* Marke, Signal, Gefahr */
  --navy: #33598a;
  --orange: #f59a2e;
  --orange-hover: #d4882e;
  --orange-strong: #f7a94d;
  --orange-soft: #3a2610;
  --coral: #f07b68;
  --coral-strong: #f59585;
  --coral-soft: #3e201b;
  --teal: #6cc0c4;
  --teal-hover: #5da6ac;
  --teal-strong: #82d0d3;
  --teal-soft: #0f3538;

  /* Schrift auf gefaerbten Flaechen. Auf Orange steht Navy, niemals Weiss. */
  --on-accent: #0b1a2c;
  --on-danger: #0b1a2c;
  --surface-inverse: #ebe8d4;
  --ink-inverse: #012042;
  --focus: #f59a2e;
  --link: #f7a94d;

  /* Schatten nur fuer Schwebendes: Menue, Dialog, Abspielleiste */
  --shadow-sm: 0 1px 3px #000000b3;
  --shadow-lg: 0 16px 32px -4px #000000cc;
  --focus-ring: 0 0 0 2px #0b1a2c, 0 0 0 4px #f59a2e;

  /* dieselben drei im dunklen Thema */
  --leiste-grund: #13253bf2;
  --welle-gespielt: #ebe8d48c;
  --welle-offen: #ebe8d43d;
}