/* orga.diy — Design-Tokens.
 *
 * ERZEUGT aus tokens/tokens.json — nicht von Hand aendern.
 * Neu erzeugen mit:  node tokens/build.mjs
 *
 * Die Farbtokens stehen als light-dark(hell, dunkel). Welcher Wert
 * gilt, haengt an color-scheme, nicht an einer Medienabfrage —
 * deshalb schaltet ein Attribut das ganze Thema um, inklusive der
 * Dinge, die der Browser selbst zeichnet (Formularelemente,
 * Scrollbalken, Auswahlfarbe).
 */

/*
 * Der Schalter.
 *
 * :root folgt der Systemeinstellung. data-theme ist die eigene
 * Angabe des Design-Systems, data-bs-theme die von Bootstrap —
 * beide werden gelesen, weil der Umschalter in der Oberflaeche
 * (Hyper-Theme, #light-dark-mode) data-bs-theme setzt. Vorher hoerte
 * nur data-theme zu: der Knopf drehte Bootstrap um und liess das
 * Papier hell stehen.
 */
:root {
  color-scheme: light dark;
}

:root[data-theme="light"],
:root[data-bs-theme="light"] {
  color-scheme: light;
}

:root[data-theme="dark"],
:root[data-bs-theme="dark"] {
  color-scheme: dark;
}

/* Farben. Ein Token, eine Zeile, beide Themes. */
:root {
  --papier: light-dark(#e8e3d5, #0a0a09);
  --papier-blatt: light-dark(#f4f1e6, #151412);
  --papier-schatten: light-dark(#d8d2bf, #040404);
  --ink: light-dark(#15130f, #f1ede1);
  --ink-muted: light-dark(#544e44, #9a9487);
  --linie: var(--ink);
  --brand: light-dark(#e3480f, #ff5a1f);
  --brand-text: light-dark(#b83505, #ff8a4d);
  --akzent: light-dark(#e8318f, #ff4fa3);
  --akzent-text: light-dark(#a8145f, #ff7ebc);
  --erfolg: light-dark(#57c14a, #6ed957);
  --erfolg-text: light-dark(#1f6b2a, #8ee87a);
  --warnung: light-dark(#f2bd00, #ffd02e);
  --warnung-text: light-dark(#7a5a00, #ffd02e);
  --fremd: light-dark(#4d7fe8, #6f90ff);
  --fremd-text: light-dark(#1c3fa8, #9db3ff);
  --auf-hell: light-dark(#15130f, #100e0b);
  --auf-invers: light-dark(#f4f1e6, #0a0a09);
  --fokus: var(--akzent-text);
  --flaeche-laut: light-dark(var(--ink), var(--papier-schatten));
  --auf-laut: light-dark(var(--auf-invers), var(--ink));
  --versatz: light-dark(5px 5px 0 #15130f, 5px 5px 0 #f1ede1);
  --versatz-fehldruck: light-dark(5px 5px 0 #e8318f, 5px 5px 0 #ff4fa3);
}

/* Abstaende, Radien, Kantenstaerken, Schriftfamilien. */
:root {
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-8: 48px;
  --space-10: 64px;
  --radius-none: 0;
  --radius-xs: 2px;
  --radius-pill: 999px;
  --strich-1: 2px;
  --strich-2: 3px;
  --strich-3: 5px;
  --font-display: Anton, "Arial Narrow", "Helvetica Neue Condensed", sans-serif;
  --font-sans: "Atkinson Hyperlegible", "Segoe UI", system-ui, sans-serif;
  --font-mono: "Courier Prime", "Courier New", ui-monospace, monospace;
}

.plakat-xl {
  font-family: var(--font-display);
  font-size: 72px;
  line-height: 81px;
  font-weight: 400;
  letter-spacing: 0.01em;
}

.plakat-l {
  font-family: var(--font-display);
  font-size: 52px;
  line-height: 58px;
  font-weight: 400;
  letter-spacing: 0.01em;
}

.plakat-m {
  font-family: var(--font-display);
  font-size: 34px;
  line-height: 38px;
  font-weight: 400;
  letter-spacing: 0.015em;
}

.plakat-s {
  font-family: var(--font-display);
  font-size: 24px;
  line-height: 26px;
  font-weight: 400;
  letter-spacing: 0.02em;
}

.lead {
  font-family: var(--font-sans);
  font-size: 19px;
  line-height: 30px;
  font-weight: 400;
}

.body {
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 26px;
  font-weight: 400;
}

.body-strong {
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 26px;
  font-weight: 700;
}

.title {
  font-family: var(--font-sans);
  font-size: 18px;
  line-height: 24px;
  font-weight: 700;
}

.small {
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 21px;
  font-weight: 400;
}

.caption {
  font-family: var(--font-sans);
  font-size: 13px;
  line-height: 18px;
  font-weight: 400;
}

.stempel {
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 15px;
  font-weight: 700;
  letter-spacing: 0.06em;
}

.data {
  font-family: var(--font-mono);
  font-size: 14px;
  line-height: 20px;
  font-weight: 400;
}

/* Plakatzeilen stehen immer in Grossbuchstaben, Stempeltexte auch. */
.plakat-xl, .plakat-l, .plakat-m, .plakat-s { text-transform: uppercase; hyphens: auto; text-wrap: balance; }
.stempel { text-transform: uppercase; }
.data { font-variant-numeric: tabular-nums; }

/* Fokus: eckig, 3px, nie entfernen. */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: var(--strich-2) solid var(--fokus);
  outline-offset: 2px;
}