/* ═══════════════════════════════════════════════════════════════
   AlphaAssay Design-System — Starter-Stylesheet v1 (2026-07-06)
   Quelle der Wahrheit: Skill writing-alphaassay-copy → references/brand-tokens.md
   Referenz-Implementierungen: branding/landing/{v5,verify}-template.html
   Regel Nr. 1: Helle institutionelle Shell, dunkle Produkt-Artefakte.
   Regel Nr. 2: brand/* ≠ chart/* ≠ verdict/* — niemals mischen.
   ═══════════════════════════════════════════════════════════════ */

:root {
  /* Shell (helle Ebene — Seiten, Dashboards-Chrome, Formulare) */
  --shell: #F6F8F3;            /* Sage-Papier — nie reines Weiß */
  --shell-raised: #FDFEFB;     /* Inputs, Cards minimal heller */
  --line: #E2E8DD;             /* Hairlines, Tabellenlinien */
  --rule: #10291D;             /* starke Linien (1.5px) */
  --ink: #10291D;              /* „Assay Forest" — Headlines, primäre Labels */
  --body: #3D4A42;             /* Fließtext */
  --faint: #66756B;            /* Sekundärtext, Kicker, Meta */

  /* Brand-Akzent (NUR Interaktion + Marke, ≤10 % Fläche) */
  --brand: #C7EF6B;            /* Lime — Buttons, Play, Fokus, Marker */
  --brand-hover: #D5F589;
  --brand-deep: #3E7A33;       /* Lime-Ersatz für Text/Strokes auf hell */
  --on-brand: #10291D;         /* Text AUF Lime */

  /* Artefakte (dunkle Ebene — Terminals, Code, Daten-Panels, Video) */
  --art: #0D1410;              /* grün-getöntes Near-Black, nie #000 */
  --art-surface: #121A14;      /* Panels im Artefakt */
  --art-line: rgba(236,242,230,.10);
  --art-text: #ECF2E6;
  --art-soft: rgba(236,242,230,.60);
  --art-faint: rgba(236,242,230,.35);
  --art-brand: #C7EF6B;

  /* Verdikt-Status (getrennter Kanal! IMMER Icon+Label dazu, nie Farbe allein) */
  --pass: #1E7F4F;   --pass-on-dark: #4CC38A;
  --fail: #A63D33;   --fail-on-dark: #E5484D;
  --revoked: #B45309;

  /* Typo */
  --disp: 'Schibsted Grotesk', 'Helvetica Neue', Arial, sans-serif;
  --sans: 'IBM Plex Sans', 'Helvetica Neue', Arial, sans-serif;
  --mono: 'JetBrains Mono', Consolas, monospace;
}

/* ── Basis ── */
* { box-sizing: border-box; }
body {
  margin: 0; background: var(--shell); color: var(--body);
  font-family: var(--sans); font-size: 16px; line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3 { font-family: var(--disp); color: var(--ink); margin: 0; letter-spacing: -.02em; }
::selection { background: rgba(199,239,107,.35); }
:focus-visible { outline: 2px solid var(--brand-deep); outline-offset: 3px; }

/* ── Buttons: eckig, Mono-Label, kein Radius, keine Gradients ── */
.btn {
  display: inline-block; font-family: var(--mono); font-size: .88rem;
  padding: 13px 24px; cursor: pointer; text-decoration: none;
  border: 1.5px solid var(--brand); background: var(--brand); color: var(--on-brand);
}
.btn:hover { background: var(--brand-hover); }
.btn-line { background: none; border-color: var(--ink); color: var(--ink); }
.btn-line:hover { background: rgba(16,41,29,.05); }
.btn-danger { background: none; border-color: var(--fail); color: var(--fail); }

/* ── Inputs (Formulare, API-Key-Felder) ── */
.input, textarea.input {
  width: 100%; background: var(--shell-raised); border: 1.5px solid var(--ink);
  padding: 14px 18px; font-family: var(--mono); font-size: .85rem; color: var(--ink);
}
.input::placeholder { color: var(--faint); }
label.field-label { font-family: var(--mono); font-size: .74rem; letter-spacing: .04em; color: var(--faint); display: block; margin-bottom: 8px; }

/* ── Status-Chips (CI-Check-Vokabular: ✕ fail / ✓ pass / ⚠ revoked) ── */
.chip {
  display: inline-flex; align-items: center; gap: .45em;
  font-family: var(--mono); font-size: .78rem; line-height: 1;
  padding: .4em .7em; border: 1.5px solid;
}
.chip-pass    { color: var(--pass);    border-color: var(--pass);    background: rgba(30,127,79,.08); }
.chip-fail    { color: var(--fail);    border-color: var(--fail);    background: rgba(166,61,51,.08); }
.chip-revoked { color: var(--revoked); border-color: var(--revoked); background: rgba(180,83,9,.08); }
.chip-neutral { color: var(--faint);   border-color: var(--line);    background: rgba(16,41,29,.03); }

/* ── Spec-Row (Linien statt Karten — Produkt-/Feature-Raster) ── */
.specrow { display: grid; grid-template-columns: repeat(4,1fr); border-top: 1.5px solid var(--rule); border-bottom: 1.5px solid var(--rule); }
.specrow > div { padding: 24px 22px; border-right: 1px solid var(--line); }
.specrow > div:first-child { padding-left: 0; }
.specrow > div:last-child { border-right: 0; }

/* ── Tabellen (Ledger-Stil) ── */
table.ledger { width: 100%; border-collapse: collapse; font-size: .9rem; }
table.ledger th { text-align: left; font-weight: 500; color: var(--ink); border-bottom: 2px solid var(--rule); padding: 0 16px 10px 0; font-size: .8rem; }
table.ledger td { border-bottom: 1px solid var(--line); padding: 12px 16px 12px 0; }
table.ledger td.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; color: var(--ink); }

/* ── Artefakt-Fenster (Terminal/Code/Daten — die dunkle Ebene) ── */
.artifact { background: var(--art); border: 1px solid rgba(16,41,29,.25); box-shadow: 0 24px 70px rgba(16,41,29,.22); overflow: hidden; }
.artifact .bar { display: flex; gap: 8px; align-items: center; padding: 12px 16px; border-bottom: 1px solid var(--art-line); }
.artifact .bar i { width: 10px; height: 10px; border-radius: 50%; background: #2E4237; }
.artifact .bar span { font-family: var(--mono); font-size: .75rem; color: var(--art-soft); margin-left: 8px; }
.artifact pre { margin: 0; padding: 20px 22px; font-family: var(--mono); font-size: .82rem; line-height: 1.8; color: var(--art-text); overflow-x: auto; }
.artifact .c { color: var(--art-faint); }   /* Kommentar */
.artifact .g { color: var(--art-brand); }   /* Akzent/OK */
.artifact .r { color: var(--fail-on-dark); }/* Fehler */

/* ── Mono-Werte mit Copy-Affordance (API-Keys, IDs, Hashes) ── */
.copyval {
  font-family: var(--mono); font-size: .82rem; color: var(--ink);
  background: rgba(16,41,29,.05); border: 1px solid var(--line);
  padding: .35em .6em; user-select: all; cursor: copy;
}

/* ── Kicker / Section-Header ── */
.kick { font-family: var(--mono); font-size: .75rem; letter-spacing: .05em; color: var(--faint); display: block; margin-bottom: 16px; }

/* ── Tags für Rollout-Status ── */
.tag-live, .tag-soon { font-family: var(--mono); font-size: .64rem; letter-spacing: .06em; color: var(--shell); padding: .25em .55em; margin-left: 8px; }
.tag-live { background: var(--brand-deep); }
.tag-soon { background: var(--faint); }