/* ============================================================================
   Grenzwacht — Design-Tokens (einzige Quelle der Wahrheit fürs UI)
   Wird VOR style.css geladen. Additiv: definiert Custom Properties, keine Regeln.
   Regel der Charter: kein neues Farb-/Größen-Literal im UI — immer ein Token.
   ==========================================================================*/

:root {
  /* ---------- Farb-Palette (semantisch) ---------- */
  /* Grundflächen & Text */
  --bg: #efe9da;
  --panel: #fffdf6;
  --panel-2: #efe6d2;              /* zweite Fläche (Karten) — war undefiniert */
  --panel-border: #cfc6ae;
  --text: #16130c;
  --text-soft: #4c463a;
  --muted: #8c8570;               /* leere/deaktivierte Beschriftung */
  --line: #cfc5a8;                /* gepunktete Trenner */
  --line-soft: #ddd3b5;

  /* Marken-/Aktionsfarben */
  --accent: #2f6f5f;
  --accent-dark: #245548;
  --danger: #b3402e;
  --danger-dark: #8a2f20;
  --gold: #8a6d1f;

  /* Semantische Familien (konsolidieren zuvor 12 Grün-/4 Purple-/mehrere Braun-Varianten) */
  --success: #1e7b3a;             /* positiv / Upgrade (dominante Grün-Variante, 11×) */
  --success-strong: #1e6b3a;
  --success-bg: rgba(30, 123, 58, 0.12);
  --arcane: #7c4fc0;              /* Skill / magisch */
  --arcane-strong: #6a3fae;
  --arcane-bg: rgba(124, 79, 192, 0.16);
  --ink-gold: #7a4b12;            /* Material-/Sektions-Braun-Gold (9×) */
  --gold-strong: #b9852a;
  --heading: #3a2c14;            /* Titel-Braun (Hub/Topline) */

  /* Lebensbalken */
  --hp-good: #3fae62;
  --hp-low: #d69b2c;
  --hp-enemy: #c8563b;

  /* Chips / Tabs (Kompendium, Schmiede, Roster) */
  --chip-bg: #ece3c9;
  --chip-border: #c3b78f;
  --chip-active-from: #ffe9a8;
  --chip-active-to: #f0c964;

  /* Overlay-Schleier */
  --scrim: rgba(20, 16, 8, 0.55);
  --scrim-soft: rgba(40, 34, 18, 0.45);

  /* ---------- Typografie ---------- */
  --font: "Avenir Next", "Segoe UI", system-ui, sans-serif;
  /* Modulare Skala — Fließtext nie < 1rem (Lesbarkeits-Charter). */
  --fs-xs: 0.8rem;
  --fs-sm: 0.9rem;
  --fs-base: 1rem;
  --fs-md: 1.1rem;
  --fs-lg: 1.25rem;
  --fs-xl: 1.5rem;
  --fs-2xl: 2rem;
  --fw-regular: 400;
  --fw-medium: 600;
  --fw-bold: 700;
  --fw-heavy: 800;
  --fw-black: 900;

  /* ---------- Abstände / Radius / Elevation ---------- */
  --space-1: 0.2rem;
  --space-2: 0.3rem;
  --space-3: 0.4rem;
  --space-4: 0.5rem;
  --space-5: 0.6rem;
  --space-6: 0.8rem;
  --space-7: 1rem;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-pill: 999px;
  --elev-1: 0 3px 8px rgba(60, 50, 20, 0.22);   /* Panel / Karte */
  --elev-2: 0 10px 28px rgba(0, 0, 0, 0.4);     /* Popover */
  --elev-3: 0 12px 40px rgba(0, 0, 0, 0.45);    /* Modal */

  /* ---------- Motion ---------- */
  --dur: 2600ms;                  /* Standard-Ereignis-Banner-Dauer — war undefiniert */
  --dur-fast: 0.12s;

  /* ---------- Kenney-Rahmen (border-image-Assets) ---------- */
  --frame-panel: url("../assets/ui/panel_beige.png");
  --frame-inset: url("../assets/ui/panelInset_beige.png");
  --frame-inset-light: url("../assets/ui/panelInset_beigeLight.png");
  --frame-btn: url("../assets/ui/buttonLong_beige.png");
  --frame-btn-primary: url("../assets/ui/buttonLong_brown.png");
  --frame-btn-square: url("../assets/ui/buttonSquare_beige.png");
  --frame-btn-round: url("../assets/ui/buttonRound_beige.png");
  --frame-btn-pressed: url("../assets/ui/buttonLong_beige_pressed.png");
  --frame-btn-primary-pressed: url("../assets/ui/buttonLong_brown_pressed.png");
  --frame-btn-square-on: url("../assets/ui/buttonSquare_brown.png");

  /* ---------- Layout ---------- */
  --col-w: 11.8rem;               /* Kampf-Karten-Spaltenbreite (Media-Override in style.css) */

  /* ---------- Safe-Area (Notch / Home-Indicator) ---------- */
  --safe-t: env(safe-area-inset-top, 0px);
  --safe-r: env(safe-area-inset-right, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-l: env(safe-area-inset-left, 0px);
}

/* Standard-Breakpoints (Doku — @media kann var() nicht auflösen):
   Handy ≤ 480px · klein ≤ 700px · Tablet ≤ 900px · breit ≤ 1150px  */