/* ---------------------------------------------------------------------------
 * tokens.css — Design-Tokens portal.erismann.de
 *
 * Quelle: freigegebenes UI "Portal UI v2" (Claude Design), importiert am
 * 20.08.2026. Die Werte stammen 1:1 aus dem Entwurf; hier stehen sie als
 * Variablen, NICHT als Inline-Hex.
 *
 * Warum das wichtig ist: Die Akzentfarbe ist laut GRUNDKONZEPT_PORTAL.md
 * §5.7 Nr. 6 ein Interim (Vollton-Gold #F5A501 war im A/B-Test zu laut fuer
 * ein taegliches Werkzeug). Die finale Kanon-Entscheidung steht in OP10 noch
 * aus — solange alles ueber diese Variablen laeuft, ist dieser Entscheid ein
 * Token-Update und keine Suche durch das Stylesheet.
 * ------------------------------------------------------------------------- */

:root {
  /* ── Flaechen ─────────────────────────────────────────────────── */
  --p-canvas:        #E7E4DF;   /* aeusserer Rahmen */
  --p-bg:            #F5F3F0;   /* Shell-Hintergrund */
  --p-surface:       #ffffff;   /* Karten, Kacheln, Kopfzeile */
  --p-surface-soft:  #FBF9F6;   /* Hover auf hellen Flaechen */
  --p-border:        #E8E3DC;
  --p-border-soft:   #EFEAE3;
  --p-border-strong: #DFD8CE;
  --p-rule:          #E4DED4;   /* duenne Trennlinien */

  /* ── Text ─────────────────────────────────────────────────────── */
  --p-ink:        #1A1714;
  --p-ink-strong: #17140F;      /* Avatar, Logo-Box */
  --p-muted:      #5E564D;      /* Fliesstext sekundaer */
  --p-muted-2:    #8A8177;      /* Meta */
  --p-muted-3:    #A9A197;      /* Mono-Label, Zaehler */

  /* ── Akzent (Interim, §5.7 Nr. 6 / OP10) ─────────────────────── */
  --p-accent:        #A05C36;
  --p-accent-hover:  #84492A;
  --p-accent-focus:  #C0784A;
  --p-accent-ink:    #8A4F2C;   /* Text auf hellem Akzent-Grund */

  /* ── Grussband + Dessin-Slot ─────────────────────────────────── */
  --p-band-bg:      #FBF4EC;
  --p-band-border:  #F0E6D8;
  --p-caption:      #AE9A7E;    /* Caption auf dem Band */
  --p-caption-soft: #C6B49A;    /* Caption im Leerzustand */

  /* Wirkende Deckkraft der Textur: Ziel 5–8 % (§5.7 Nr. 4).
     Das Motiv ist bereits stark aufgehellt; die Maske senkt die
     wahrgenommene Deckkraft zusaetzlich zum Bandrand hin. */
  --p-texture-opacity: 0.85;
  --p-texture-empty-opacity: 0.5;

  /* ── Kachel-Bausteine ────────────────────────────────────────── */
  --p-iconbox:      #FAF2E9;
  --p-iconbox-alt:  #F4F1ED;
  --p-badge-bg:     #F1E1D2;
  --p-badge-ink:    var(--p-accent-ink);
  --p-netz-bg:      #F2EEE7;
  --p-netz-ink:     #6B6259;

  /* ── Zustaende ───────────────────────────────────────────────── */
  --p-crit:  #A83A2C;
  --p-warn:  #B07C10;
  --p-ok:    #2F6B45;
  --p-empty-bg:     #FCF9F4;
  --p-empty-border: #DFD3C2;

  /* ── Typografie ──────────────────────────────────────────────── */
  --p-font: 'Instrument Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --p-mono: 'IBM Plex Mono', ui-monospace, 'Cascadia Mono', Consolas, monospace;

  /* ── Form ────────────────────────────────────────────────────── */
  --p-r-card: 14px;
  --p-r-box:  11px;
  --p-r-pill: 999px;
  --p-shadow-tile:  0 10px 24px -14px rgba(58, 42, 26, 0.28);
  --p-shadow-panel: 0 20px 48px -18px rgba(38, 26, 14, 0.30);

  /* Mindest-Trefferflaeche: 44 px, durchgehend (Touch + PWA). */
  --p-hit: 44px;
}