/* openlaw-ui-tokens.css — v1 (2026-07-03)
   EIN Design-System, ZWEI Skins (User-Entscheidung 2026-07-03): gemeinsame Struktur-DNA (Layer 1),
   produktspezifischer Akzent (Layer 2 via [data-skin]). Single Source of Truth der SEMANTIK:
   docs/system/openlaw-design-dna.md (Paritäts-Checkliste). Diese Datei wird in beide build-losen
   Frontends VENDORED (mimo_chat/static/ + safebox_pwa/) — Änderungen IMMER in beiden Kopien + Doc.

   Layer 1 — PRIMITIVES (überall identisch): Radii, Spacing, Shadow, Semantik-Farben, Badge-/Karten-
   Anatomie, Font-ROLLEN (display=Serif-Autorität, ui=Grotesk, data=Mono für Zahlen/GZ/Quellen).
   Layer 2 — SKIN (produktspezifisch): Akzent/Flächen/Font-Familien.
     [data-skin="chipsi"]    = Chipsi (Clay, Anthropic-clean)
     [data-skin="judicario"] = Safebox/Judicario (Navy/Gold, Wortmarken-Standard)                */

/* ───────────────────────────── Layer 1 · PRIMITIVES ───────────────────────────── */
:root {
  /* Radii (verbindlich — Karten/Controls/Chips) */
  --r-lg: 12px;            /* Modal, Karte groß         */
  --r-md: 8px;             /* Tool-/FACT-Card, Input    */
  --r-sm: 6px;             /* Chip, Badge, Button klein */

  /* Spacing-Skala */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px;  --sp-4: 16px;  --sp-5: 24px;  --sp-6: 32px;

  /* Shadow-Skala */
  --shadow-card: 0 1px 3px rgba(20, 20, 20, .07);
  --shadow-pop:  0 8px 30px rgba(20, 20, 20, .16);

  /* Semantik (skin-unabhängig — Status, nie Akzent) */
  --ok:   #2f6b46;         /* verbunden · geprüft · grün  */
  --warn: #b3831d;         /* teilweise · Achtung · amber */
  --err:  #b3402f;         /* Fehler · abgelehnt          */

  /* Badge-Anatomie (Trust-Vokabular — Glyphen+Semantik überall identisch):
     ✓ geprüft/MASSGEBLICH = NUR deterministisch Gerechnetes (eigene Uploads / Box-FACTS)
     ⚖ amtlich·zitierfähig = Gesetze/Urteile mit Fundstelle
     „ Kurzzitat           = verlagsgebunden, nie Volltext
     🔒 Ihre Daten          = Safebox read-only                                        */
  --badge-font: var(--font-data);
  --badge-size: 10px;
  --badge-track: .06em;
  --badge-pad: 2px 7px;

  /* Font-ROLLEN (Familien liefern die Skins) */
  --font-display: serif;
  --font-ui: system-ui, sans-serif;
  --font-data: ui-monospace, monospace;

  /* Quadrat-Punkt-Wortmarke (gemeinsame Marken-DNA): Kantenlänge .30em, r=1px, Abstand .10em */
  --mark-size: .30em;
  --mark-radius: 1px;
  --mark-gap: .10em;
}

/* ───────────────────────────── Layer 2 · SKIN: chipsi ─────────────────────────── */
[data-skin="chipsi"] {
  --accent:       #D97757;  /* Clay              */
  --accent-hover: #BD5A39;
  --accent-tint:  #F4E9E1;
  --paper:        #F0EEE6;
  --surface:      #FBFAF7;
  --card:         #FFFFFF;
  --ink:          #1F1E1B;
  --ink-soft:     #57544B;
  --ink-faint:    #8C887C;
  --line:         #E4E0D4;
  --line-strong:  #D5D0C1;
  --font-display: 'Newsreader', serif;
  --font-ui:      'Hanken Grotesk', system-ui, sans-serif;
  --font-data:    'JetBrains Mono', ui-monospace, monospace;
}

/* ─────────────────────────── Layer 2 · SKIN: judicario ────────────────────────── */
[data-skin="judicario"] {
  --accent:       #C9A24B;  /* Gold (Wortmarke)  */
  --accent-hover: #B08A38;
  --accent-tint:  #F3EAD8;
  --paper:        #F7F5F1;
  --surface:      #FCFBF9;
  --card:         #FFFFFF;
  --ink:          #1a2330;  /* Safebox-ink (Brand-ink #141414 = --ink-brand) */
  --ink-brand:    #141414;
  --ink-soft:     #4a5568;
  --ink-faint:    #6b7686;
  --line:         #dad5cc;
  --line-strong:  #c9c2b6;
  --navy:         #0B1F33;  /* Primärfläche Masthead/Buttons */
  --font-display: 'Spectral', serif;
  --font-ui:      'Spline Sans', system-ui, sans-serif;
  --font-data:    'Spline Sans Mono', ui-monospace, monospace;
}

/* ──────────────────── Gemeinsame Komponenten-Anatomie (beide Skins) ───────────── */
.ol-badge {                                   /* Trust-Badge: eine Form, vier Varianten */
  font-family: var(--badge-font);
  font-size: var(--badge-size);
  letter-spacing: var(--badge-track);
  padding: var(--badge-pad);
  border-radius: var(--r-sm);
  text-transform: uppercase;
  display: inline-block;
  line-height: 1.5;
}
.ol-badge--checked  { color: var(--ok);        background: color-mix(in srgb, var(--ok) 10%, transparent); }   /* ✓ geprüft · MASSGEBLICH */
.ol-badge--official { color: var(--ink);       background: var(--accent-tint); }                               /* ⚖ amtlich·zitierfähig   */
.ol-badge--quote    { color: var(--ink-faint); background: color-mix(in srgb, var(--ink-faint) 12%, transparent); } /* „ Kurzzitat        */
.ol-badge--owndata  { color: #3b5266;          background: #e8eef4; }                                          /* 🔒 Ihre Daten            */
.ol-badge--warn     { color: var(--warn);      background: color-mix(in srgb, var(--warn) 12%, transparent); } /* ⚠ teilweise/ungeprüft   */

.ol-mark {                                    /* Quadrat-Punkt der Wortmarke */
  display: inline-block;
  width: var(--mark-size);
  height: var(--mark-size);
  border-radius: var(--mark-radius);
  margin-left: var(--mark-gap);
  background: var(--accent);
}