/* werter-tokens.css · the foundation of the Werter UI kit
 * ════════════════════════════════════════════════════════════════════
 * Everything here is binding for every Werter board. Colours follow
 * the letterhead; nothing else may carry colour. One theme, white,
 * by decision.
 *
 * THE RADIUS RULE, written down so it stops drifting:
 *   2px  · evidence chrome: status pills and the truth pills. They
 *          mark facts, and facts wear sharp corners.
 *   8px  · controls: buttons, chips, inputs, selects, icon buttons,
 *          stat tiles. Everything a hand touches.
 *   18px · panels, and nothing else.
 *
 * THE SPACING RULE: the 4px series only (4/8/12/16/24/32...).
 * THE SHADOW RULE: one hairline at most; separation is lines, not
 * depth. The single exception lives on slider thumbs, documented at
 * their definition.
 * Docs: docs/ui/tokens.md
 */

/* Self-hosted type, no third-party font host involved. SIL OFL 1.1,
   see assets/fonts/LICENSE.txt. */
@font-face { font-family: "Merriweather"; font-style: normal; font-weight: 700; font-display: swap;
  src: url(../fonts/merriweather-latin-700-normal.woff2) format("woff2"); }
@font-face { font-family: "Merriweather"; font-style: normal; font-weight: 900; font-display: swap;
  src: url(../fonts/merriweather-latin-900-normal.woff2) format("woff2"); }
@font-face { font-family: "Open Sans"; font-style: normal; font-weight: 400; font-display: swap;
  src: url(../fonts/open-sans-latin-400-normal.woff2) format("woff2"); }
@font-face { font-family: "Open Sans"; font-style: italic; font-weight: 400; font-display: swap;
  src: url(../fonts/open-sans-latin-400-italic.woff2) format("woff2"); }
@font-face { font-family: "Open Sans"; font-style: normal; font-weight: 600; font-display: swap;
  src: url(../fonts/open-sans-latin-600-normal.woff2) format("woff2"); }
@font-face { font-family: "Open Sans"; font-style: normal; font-weight: 700; font-display: swap;
  src: url(../fonts/open-sans-latin-700-normal.woff2) format("woff2"); }

:root {
  --surface:  #FFFFFF;
  --ink:      #191C15;
  --green:    #003300;   /* Werter brand green, interactive */
  --terra:    #CF744A;   /* brand accent, editorial emphasis, never clickable */
  --terratext:#A04E27;   /* terracotta that may carry words on white */
  --hairline: #E4E1D8;
  --muted:    #626A5C;
  --disabled: #9CA3AF;

  --st-green: #10B981;
  --st-amber: #F59E0B;
  --st-red:   #EF4444;
  --sttext-green: #0E7C5A;
  --sttext-amber: #B45309;
  --sttext-red:   #C81E1E;
  --onfill:   #111111;

  /* Die Hauscreme. Sie stand bisher nur oertlich in .lh--dark und in
     wettbewerb.css als --wb-hell; beides derselbe Wert. Hier steht sie
     einmal fuer alle. */
  --cream:    #F9F2E4;

  /* ZWEI VERSCHIEDENE WEISS-BEGRIFFE, und sie duerfen nicht
     verwechselt werden:
       --ground  die Flaeche, auf der ein Kasten steht (Panel, Scroll-
                 kasten) -- bleibt weiss.
       --boden   der Grund der SEITE, unter dem gruenen Kopf. Creme,
                 damit die weissen Panels darauf als Karten lesbar
                 werden statt weiss auf weiss zu stehen. */
  --ground:   #FFFFFF;
  --boden:    var(--cream);
  --panel:    var(--surface);
  --line:     var(--hairline);
  --text:     var(--ink);
  --dim:      var(--muted);
  --link:     var(--green);
  --link-ink: #FFFFFF;
  --accent:   var(--green);
  --t-green:  var(--sttext-green);
  --t-amber:  var(--sttext-amber);
  --t-red:    var(--sttext-red);
  --hover:    #F5F3EC;

  /* chart marks on white; validated (lightness, chroma, contrast) */
  --chart:    #4C7A3F;

  /* the isometric component matrix */
  --iso-tile: #F1EEE5;
  --iso-t:    #C6D1BA;
  --iso-l:    #82927A;
  --iso-r:    #A7B79B;
  --iso-line: #38412F;

  --serif: "Merriweather", Georgia, serif;
  --sans:  "Open Sans", system-ui, sans-serif;
  --mono:  ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;
}

* { box-sizing: border-box; }
html { color-scheme: light only; }

/* one focus language everywhere */
button:focus-visible, a:focus-visible, select:focus-visible, summary:focus-visible,
input:focus-visible, textarea:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--green); outline-offset: 2px; border-radius: 2px;
}

/* The one metaline pattern. Reused, never re-invented. */
.meta {
  font-family: var(--mono);
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--dim);
}

/* The one empty-state pattern: a sentence that explains itself,
   never an illustration. Docs: docs/ui/empty-state.md */
.empty { font-size: 0.875rem; color: var(--dim); margin: 0; max-width: 31rem; }