/* ═══════════════════════════════════════════════════════════════════════
 *  LastCity — Design-Tokens (Source-of-Truth, 1:1 aus dem In-Game-Design-System)
 *  Diese Werte werden auf der gesamten Website wiederverwendet. Nicht erfinden —
 *  übernommen aus lastcity-inventory / lastcity-vehiclecrafting.
 * ═══════════════════════════════════════════════════════════════════════ */

/* Big Shoulders Display (400/700/900) — bereits base64-gebündelt, lokal selbst-gehostet */
@import url("/static/fonts/big-shoulders.css");

/* ── IBM Plex Sans (Body 400/600) — lokal selbst-gehostet (DSGVO: kein Google-CDN) ── */
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/static/fonts/ibm-plex-sans-400.woff2") format("woff2");
}
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/static/fonts/ibm-plex-sans-600.woff2") format("woff2");
}

/* ── Geist Mono (Labels/Zahlen 400/500) — lokal selbst-gehostet (DSGVO: kein Google-CDN) ── */
@font-face {
  font-family: 'Geist Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/static/fonts/geist-mono-400.woff2") format("woff2");
}
@font-face {
  font-family: 'Geist Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/static/fonts/geist-mono-500.woff2") format("woff2");
}

:root {
  /* ── Amber (Primärfarbe) ───────────────────────────────────────────── */
  --lc-amber:      #d4b35a;
  --lc-amber-hi:   #e8c870;
  --lc-amber-deep: #8a6f24;
  --lc-amber-soft: rgba(212,179,90,0.10);
  --lc-amber-text: #1a1306;
  --lc-amber-glow: rgba(212,179,90,0.40);

  /* ── Forge (Rust-Orange — NUR für Craft/Commit-artige primäre CTAs, z.B. "Jetzt spielen") ── */
  --lc-forge:      #c1440e;
  --lc-forge-glow: rgba(193,68,14,0.50);

  /* ── Ink (Text) ────────────────────────────────────────────────────── */
  --lc-ink:      #ebdcb8;
  --lc-ink-soft: rgba(235,220,184,0.62);
  --lc-ink-dim:  rgba(235,220,184,0.36);

  /* ── Hintergrund ───────────────────────────────────────────────────── */
  --lc-bg:   #0d0905;
  --lc-bg-2: #16110a;

  /* ── Flächen ───────────────────────────────────────────────────────── */
  --lc-surface:   rgba(28,21,12,0.88);
  --lc-surface-2: rgba(38,30,18,0.72);
  --lc-surface-3: rgba(48,38,22,0.60);

  /* ── Linien ────────────────────────────────────────────────────────── */
  --lc-line:        rgba(212,179,90,0.18);
  --lc-line-dim:    rgba(235,220,184,0.08);
  --lc-line-strong: rgba(212,179,90,0.45);

  /* ── Status ────────────────────────────────────────────────────────── */
  --lc-success: #8cc566;
  --lc-danger:  #d24f4f;
  --lc-warn:    #e0a64f;

  /* ── Radien ────────────────────────────────────────────────────────── */
  --lc-r-sm:   3px;
  --lc-r-md:   4px;
  --lc-r-lg:   6px;
  --lc-r-xl:   10px;
  --lc-r-pill: 999px;

  /* ── Motion ────────────────────────────────────────────────────────── */
  --lc-dur-fast: 140ms;
  --lc-dur:      200ms;
  --lc-ease:     cubic-bezier(0.4,0,0.2,1);

  /* ── Fonts ─────────────────────────────────────────────────────────── */
  --lc-font-display: 'Big Shoulders Display', system-ui, sans-serif;
  --lc-font-body:    'IBM Plex Sans', system-ui, sans-serif;
  --lc-font-mono:    'Geist Mono', 'IBM Plex Mono', ui-monospace, monospace;
}

/* ═══════════════════════════════════════════════════════════════════════
 *  Signature-Overlays (Utility-Klassen) — 1:1 aus dem Design-System
 * ═══════════════════════════════════════════════════════════════════════ */

/* Scanline-Overlay: 2px-Schritt / 1px schwarze Linie, Opazität ~0.35 */
.lc-scanlines::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
  background-image: repeating-linear-gradient(
    0deg,
    transparent 0px, transparent 2px,
    rgba(0,0,0,0.06) 2px, rgba(0,0,0,0.06) 3px
  );
  opacity: 0.35;
}

/* Dot-Grid-Overlay: 1px Amber-Punkte (0.025) im 3px-Raster */
.lc-dotgrid::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
  background-image: radial-gradient(rgba(212,179,90,0.025) 1px, transparent 1px);
  background-size: 3px 3px;
}