/* ── styles.css ── */
/* VESTA Labs Design System — global entry */
/* ── tokens/fonts.css ── */
/* VESTA Labs — type delivery: selbst gehostet. Die @font-face-Regeln kommen aus tokens.css
   (tokens.json type.fonts → fonts/*.woff2: Instrument Serif 400 + Italic, Work Sans variabel 300–700,
   IBM Plex Mono 400/500; latin + latin-ext, OFL). Kein Google-Fonts-Import mehr.
   --font-system (kein Download) ist der Stack des Betriebssystems für Text in der Anwendung. */


/* ── styles.css ── */

/* ── tokens/colors.css ── */
/* VESTA Labs — colors. Forest, two weathers:
   :root = „Nachtregen" (dark rainy forest at night — cool, wet, gold as lantern);
   [data-theme="light"] = „Sonnentag" (sunlit day forest — warm, colourful greens).
   Lime lives ONLY in the butterfly mark assets — never as a UI token. */
:root{
}
[data-theme="light"]{
}

/* ── styles.css ── */

/* ── tokens/typography.css ── */
/* VESTA Labs — type. Instrument Serif = display only; Work Sans = alles Funktionale
   außerhalb der Anwendung (Landing, Marketing, Deck: Body, UI, Buttons, Nav);
   System-Stack (--font-system) = alles Alltägliche in der Anwendung;
   IBM Plex Mono = nur Metadaten/Kicker. Ein App-Screen setzt data-surface="app" auf body oder seinem Wurzelelement. */
:root{
}

/* ── styles.css ── */

/* ── tokens/spacing.css ── */
/* VESTA Labs — spacing (4px base) + radii. */
:root{
}

/* ── styles.css ── */

body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--font-sans);-webkit-font-smoothing:antialiased}
/* Anwendung: data-surface="app" auf body oder dem Wurzelelement schaltet Text, Buttons und Felder auf den System-Stack */
[data-surface="app"],[data-surface="app"] .btn,[data-surface="app"] input,[data-surface="app"] textarea,[data-surface="app"] select,[data-surface="app"] button{font-family:var(--font-system)}
a{color:var(--accent);text-decoration:none}a:hover{color:var(--ink)}
::selection{background:var(--accent);color:var(--accent-ink)}
/* Feder-Ink buttons (A1) — 2px Ink-Offset, wächst beim Hover, drückt beim Klick */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;font-family:var(--font-sans);border:0;border-radius:var(--radius);cursor:pointer;text-decoration:none;white-space:nowrap;transition:background .14s ease,box-shadow .14s ease,transform .1s ease}
.btn:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.btn-primary{background:var(--accent);color:var(--accent-ink);font-weight:700;box-shadow:2px 2px 0 0 var(--ink)}
.btn-primary:hover{background:var(--accent-hover);color:var(--accent-ink);box-shadow:3px 3px 0 0 var(--ink)}
.btn-primary:active{transform:translate(2px,2px);box-shadow:0 0 0 0 var(--ink)}
.btn-ghost{background:var(--bg);color:var(--ink);font-weight:600;box-shadow:0 0 0 1px var(--ink),2px 2px 0 0 var(--ink)}
.btn-ghost:hover{color:var(--ink);box-shadow:0 0 0 1px var(--ink),3px 3px 0 0 var(--ink)}
.btn-ghost:active{transform:translate(2px,2px);box-shadow:0 0 0 1px var(--ink),0 0 0 0 var(--ink)}
.btn-sm{font-size:14px;padding:9px 16px}
.btn-md{font-size:15px;padding:11px 20px}
.btn-lg{font-size:var(--text-ui);padding:16px 30px}
.btn[disabled],.btn[aria-disabled="true"]{opacity:.45;pointer-events:none}
/* Markierung im Fließtext — wie eine Textauswahl: Goldfläche, dunkle Schrift, 600 */
.mark{background:var(--accent);color:var(--accent-ink);font-weight:600;padding:0 .12em;border-radius:2px;-webkit-box-decoration-break:clone;box-decoration-break:clone}
/* Gegner kicker — mono caps with status dot */
.kicker{display:inline-flex;align-items:center;gap:13px;font-family:var(--font-mono);font-size:var(--text-meta);font-weight:500;letter-spacing:var(--tracking-caps-wide);text-transform:uppercase;color:var(--ink)}
.kicker .dot{width:9px;height:9px;border-radius:var(--radius-pill);background:var(--accent);box-shadow:0 0 0 5px var(--ring);flex:none}
.kicker .sep{width:1px;height:15px;background:var(--border);flex:none}
.kicker .brand{color:var(--accent)}

/* ── tokens/fonts.css ── */

/* ── tokens/colors.css ── */

/* ── tokens/typography.css ── */

/* ── tokens/spacing.css ── */