/* =====================================================================
   brand.css — Webforging-CI für die Anwendung „Web Forging"
   Tokens übernommen aus dem Repo webforging.de (design-tokens.css):
   Glut-Temperatur-Gradient auf Bone/Obsidian, kantige Radien,
   Space Grotesk / Manrope / JetBrains Mono (selbst gehostet).
   Die XP-Fensterrahmen bleiben unangetastet — nur das Innere der
   Anwendung trägt die Marke.
   ===================================================================== */

@font-face {
  font-family: "Space Grotesk";
  src: url("../assets/fonts/display-600.woff2") format("woff2");
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Space Grotesk";
  src: url("../assets/fonts/display-700.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Manrope";
  src: url("../assets/fonts/body-400.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Manrope";
  src: url("../assets/fonts/body-500.woff2") format("woff2");
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("../assets/fonts/jetbrainsmono-400.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}

:root {
  /* Darks / Lights */
  --wf-bg: #F3F0E7;
  --wf-surface: #FBF9F2;
  --wf-surface-2: #EFEBE0;
  --wf-line: rgba(37, 50, 42, .12);
  --wf-line-strong: rgba(37, 50, 42, .22);
  /* Heat */
  --wf-primary: #E08A3C;
  --wf-on-primary: #2A2218;
  --wf-accent: #A14E1C;
  --wf-heat-deep: #C81E0F;
  --wf-heat-core: #FF5A1E;
  --wf-heat-amber: #FFB534;
  --wf-heat-white: #FFE9C2;
  /* Tempered steel / Text */
  --wf-green: #4C6B3C;
  --wf-green-deep: #2C3F26;
  --wf-text: #2C3F26;
  --wf-muted: #586357;
  /* Obsidian für die Quelltextkonsole */
  --wf-obsidian: #1B1F19;
  --wf-obsidian-2: #141712;

  --wf-molten: linear-gradient(135deg,
      var(--wf-heat-deep) 0%, var(--wf-heat-core) 45%,
      var(--wf-heat-amber) 80%, var(--wf-heat-white) 100%);

  --wf-display: "Space Grotesk", "Trebuchet MS", Tahoma, sans-serif;
  --wf-body: "Manrope", Tahoma, Verdana, sans-serif;
  --wf-mono: "JetBrains Mono", "Lucida Console", Consolas, monospace;
}

/* =====================================================================
   Markenzeichen — die schwarze Amboss-Marke wird als Maske verwendet.
   Als Programmsymbol sitzt sie auf einer Glut-Kachel: das Original ist
   quer (17:10) und wäre in einem 32-px-Quadrat nur ein Strich.
   ===================================================================== */
.wf-mark {
  display: block;
  background: var(--wf-molten);
  -webkit-mask: url("../assets/wf-mark.png") center / contain no-repeat;
  mask: url("../assets/wf-mark.png") center / contain no-repeat;
}

.wf-tile {
  display: block;
  position: relative;
  border-radius: 3px;
  background: var(--wf-molten);
  box-shadow: inset 0 0 0 1px rgba(42, 34, 24, .45);
}
.wf-tile > i {
  position: absolute;
  inset: 11% 8%;
  background: var(--wf-on-primary);
  -webkit-mask: url("../assets/wf-mark.png") center / contain no-repeat;
  mask: url("../assets/wf-mark.png") center / contain no-repeat;
}

/* Marke im Start-Knopf (ersetzt die Flagge) */
.startbtn .startmark { width: 20px; height: 20px; flex: none; box-shadow: inset 0 0 0 1px rgba(42,34,24,.45), 1px 1px 2px rgba(0,0,0,.4); }

/* Größen: .ico ist an einigen Stellen noch nicht neben svg gelistet */
.taskbtn .ico { width: 15px; height: 15px; flex: none; }
.ql-btn .ico  { width: 16px; height: 16px; }
.exp-panel li .ico { width: 16px; height: 16px; flex: none; }
.tb-btn .ico  { width: 16px; height: 16px; flex: none; }
.dicon .wf-tile { box-shadow: inset 0 0 0 1px rgba(42, 34, 24, .45), 1px 2px 3px rgba(0, 0, 0, .5); }
.dicon .ico { filter: none; }

/* Wortmarke */
.wf-word {
  display: block;
  background: var(--wf-green-deep);
  -webkit-mask: url("../assets/wf-word.png") left center / contain no-repeat;
  mask: url("../assets/wf-word.png") left center / contain no-repeat;
}

/* =====================================================================
   Anwendungsinneres in der Marke
   ===================================================================== */
.wf {
  background: var(--wf-bg);
  font-family: var(--wf-body);
  color: var(--wf-text);
}
.wf, .wf input, .wf select, .wf textarea, .wf button { font-family: var(--wf-body); }

/* Kopfzeilen der drei Spalten */
.wf-pal-head, .wf-props-head, .wf .wf-code-head {
  background: var(--wf-surface);
  border-bottom: 1px solid var(--wf-line-strong);
  color: var(--wf-text);
  font: 600 10px/1.9 var(--wf-display);
  letter-spacing: .18em;
  text-transform: uppercase;
  padding: 4px 10px;
  position: relative;
}
.wf-pal-head::after, .wf-props-head::after {
  content: "";
  position: absolute; left: 0; bottom: -1px;
  width: 28px; height: 2px;
  background: var(--wf-molten);
}

/* Palette */
.wf-pal, .wf-props {
  background: var(--wf-surface);
  border-color: var(--wf-line-strong);
}
.wf-block-btn {
  color: var(--wf-text);
  border-radius: 2px;
  gap: 9px;
}
.wf-block-btn:hover {
  border-color: var(--wf-line-strong);
  background: var(--wf-surface-2);
}
.wf-block-btn:active { background: #E7E1D2; }
.wf-block-btn .glyph {
  width: 24px; height: 24px;
  border-radius: 2px;
  /* Primär-Orange statt Vollglut: dunkler Text braucht den hellen Teil */
  background: linear-gradient(135deg, var(--wf-primary) 0%, #F5A340 55%, var(--wf-heat-amber) 100%);
  color: var(--wf-on-primary);
  font: 700 11px/1 var(--wf-display);
  box-shadow: none;
}
.wf-block-btn b { font: 500 11px/1.35 var(--wf-body); }
.wf-block-btn em { color: var(--wf-muted); font: 400 10px/1.3 var(--wf-mono); }
.wf-pal-foot {
  border-top: 1px solid var(--wf-line);
  color: var(--wf-muted);
  font: 400 10px/1.55 var(--wf-mono);
}

/* Leiste über der Leinwand */
.wf-canvas-bar {
  background: var(--wf-surface);
  border-bottom: 1px solid var(--wf-line-strong);
  padding: 5px 9px;
}
.wf-canvas-bar label {
  color: var(--wf-muted);
  font: 400 9.5px/1 var(--wf-mono);
  letter-spacing: .14em;
  text-transform: uppercase;
  gap: 6px;
}
.wf-canvas-bar .xp-input,
.wf-canvas-bar .xp-select {
  font: 400 11px var(--wf-body);
  color: var(--wf-text);
  border: 1px solid var(--wf-line-strong);
  background: #fff;
  border-radius: 2px;
}

/* Leinwand */
.wf-canvas {
  background:
    var(--grad-ember, radial-gradient(120% 80% at 70% 0%, rgba(255, 90, 30, .10), rgba(255, 90, 30, 0) 60%)),
    repeating-conic-gradient(#E4E0D4 0 25%, #EDE9DE 0 50%) 0 0 / 16px 16px;
  box-shadow: inset 0 2px 8px rgba(37, 50, 42, .14);
}
.wf-viewport {
  border: 1px solid var(--wf-line-strong);
  box-shadow: 0 18px 50px -24px rgba(37, 50, 42, .5);
}
.wf-vp-chrome {
  background: var(--wf-surface-2);
  border-bottom: 1px solid var(--wf-line);
  color: var(--wf-muted);
  font: 400 9.5px var(--wf-mono);
}
.wf-vp-chrome i { background: var(--wf-line-strong); box-shadow: none; }

/* Eigenschaften */
.wf-field > label {
  color: var(--wf-muted);
  font: 400 9.5px var(--wf-mono);
  letter-spacing: .14em;
}
.wf-field .xp-input, .wf-field .xp-select, .wf-field .xp-area {
  border: 1px solid var(--wf-line-strong);
  border-radius: 2px;
  font: 400 11px var(--wf-body);
  color: var(--wf-text);
}
.wf-field .xp-area { font: 400 11px/1.55 var(--wf-body); }
.wf-field .xp-input:focus, .wf-field .xp-area:focus, .wf-field .xp-select:focus {
  border-color: var(--wf-primary);
  box-shadow: 0 0 0 2px rgba(224, 138, 60, .28);
}
.wf-props .xp-range { accent-color: var(--wf-heat-core); }
.wf-empty { color: var(--wf-muted); font-family: var(--wf-body); }
.wf-props .xp-group {
  border: 1px solid var(--wf-line);
  border-radius: 2px;
  background: var(--wf-bg);
}
.wf-props .xp-group > legend {
  color: var(--wf-text);
  font: 600 9.5px var(--wf-display);
  letter-spacing: .16em;
  text-transform: uppercase;
}
.wf-block-title {
  font: 600 12px/1.3 var(--wf-display);
  color: var(--wf-text);
  letter-spacing: -.01em;
  padding-bottom: 6px;
  margin-bottom: 9px;
  border-bottom: 1px solid var(--wf-line);
  position: relative;
}
.wf-block-title::after {
  content: "";
  position: absolute; left: 0; bottom: -1px;
  width: 22px; height: 2px;
  background: var(--wf-molten);
}

/* Marken-Schaltflächen innerhalb der Anwendung */
.wf-props .xp-btn, .wf-order .xp-btn {
  border: 1px solid var(--wf-line-strong);
  border-radius: 2px;
  background: var(--wf-surface);
  color: var(--wf-text);
  box-shadow: none;
  font: 500 11px var(--wf-body);
}
.wf-props .xp-btn:hover {
  border-color: var(--wf-primary);
  background: #fff;
  box-shadow: 0 0 0 1px rgba(224, 138, 60, .35);
}

/* Werkzeugleiste des Web-Forging-Fensters */
.win.brandwin .win-toolbar {
  background: linear-gradient(180deg, var(--wf-surface) 0%, var(--wf-bg) 100%);
  border-bottom: 1px solid var(--wf-line-strong);
}
.win.brandwin .tb-btn {
  color: var(--wf-text);
  border-radius: 2px;
  font: 500 11px var(--wf-body);
}
.win.brandwin .tb-btn:hover {
  border-color: var(--wf-line-strong);
  background: var(--wf-surface-2);
}
.win.brandwin .tb-btn.forge {
  /* CI-Paarung mit belegtem Kontrast: --color-primary + --color-on-primary.
     Der Vollglut-Verlauf beginnt in Tiefrot, darauf ist dunkler Text nicht lesbar. */
  background: linear-gradient(135deg, var(--wf-primary) 0%, #F5A340 55%, var(--wf-heat-amber) 100%);
  border-color: rgba(120, 50, 10, .55);
  color: var(--wf-on-primary);
  font-weight: 700;
  text-shadow: 0 1px 0 rgba(255, 244, 226, .4);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 0 16px -6px rgba(255, 138, 60, .7);
}
.win.brandwin .tb-btn.forge svg { filter: drop-shadow(0 1px 0 rgba(255,244,226,.5)); }
.win.brandwin .tb-btn.forge:hover { filter: brightness(1.05); border-color: rgba(120, 50, 10, .8); }
.win.brandwin .tb-sep { background: var(--wf-line-strong); box-shadow: none; }
.win.brandwin .win-menubar {
  background: var(--wf-surface);
  border-bottom: 1px solid var(--wf-line);
  font-family: var(--wf-body);
}
.win.brandwin .menu-title:hover, .win.brandwin .menu-title.open {
  background: var(--wf-green-deep);
  color: var(--wf-heat-amber);
}
.win.brandwin .win-chrome { background: var(--wf-bg); }
.win.brandwin .win-status {
  background: var(--wf-surface);
  border-top: 1px solid var(--wf-line-strong);
  color: var(--wf-muted);
  font: 400 10px var(--wf-mono);
}
.win.brandwin .win-status span { border-color: var(--wf-line); }

/* Quelltextkonsole in Obsidian */
.wf-code { background: var(--wf-obsidian); border-top: 1px solid var(--wf-line-strong); }
.wf .wf-tab {
  font: 400 10px var(--wf-mono);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--wf-muted);
  border-right: 1px solid var(--wf-line);
}
.wf .wf-tab.on {
  background: var(--wf-obsidian);
  color: var(--wf-heat-amber);
  font-weight: 400;
}
.wf .wf-code-toggle { color: var(--wf-muted); font-family: var(--wf-mono); }
.wf-code-body pre, .wf-log {
  font: 400 10.5px/1.62 var(--wf-mono);
  color: #A9B5A2;
}
.wf-code-body::-webkit-scrollbar-track { background: var(--wf-obsidian-2); }
.wf-code-body::-webkit-scrollbar-thumb {
  background: #2E362A; border: 1px solid #3D4737; border-radius: 2px;
}

.tk-tag { color: var(--wf-heat-amber); }
.tk-atr { color: #A8C08F; }
.tk-str { color: #FF8A4C; }
.tk-cmt { color: #67735F; font-style: italic; }
.tk-doc { color: var(--wf-primary); }

.wf-log b { color: var(--wf-heat-amber); }
.wf-log i { color: #FF8A4C; }
.wf-log u { color: #67735F; }

/* Fortschrittsdialog beim Schmieden */
.win.brandwin-dlg .win-chrome { background: var(--wf-bg); font-family: var(--wf-body); }
.win.brandwin-dlg .xp-progress {
  border: 1px solid var(--wf-line-strong);
  background: var(--wf-surface);
  border-radius: 2px;
  height: 16px;
}
.win.brandwin-dlg .xp-progress > i {
  background: var(--wf-molten);
  box-shadow: 0 0 14px -2px rgba(255, 90, 30, .7);
}
.win.brandwin-dlg .forge-steps { font: 400 10.5px/1.7 var(--wf-mono); color: var(--wf-muted); }
.win.brandwin-dlg .forge-steps li.active { color: var(--wf-accent); font-weight: 400; }
.win.brandwin-dlg .forge-steps li.done::before { color: var(--wf-green); }
.win.brandwin-dlg .dlg-text, .win.brandwin-dlg .dlg-body { font-family: var(--wf-body); color: var(--wf-text); }
.win.brandwin-dlg .dlg-text strong { font: 600 13px var(--wf-display); }
.win.brandwin-dlg code, .win.brandwin code {
  font-family: var(--wf-mono);
  background: var(--wf-surface-2);
  border: 1px solid var(--wf-line);
  padding: 0 3px;
}

/* Info-Dialog mit Wortmarke und Claim */
.wf-about { padding: 2px 0 0; }
.wf-about .wf-word { width: 148px; height: 34px; margin-bottom: 10px; }
.wf-about .claim {
  font: 600 15px/1.25 var(--wf-display);
  color: var(--wf-text);
  letter-spacing: -.01em;
  margin: 0 0 10px;
}
.wf-about .claim em { font-style: normal; color: var(--wf-accent); }
.wf-about p { margin: 0 0 8px; font: 400 11px/1.6 var(--wf-body); color: var(--wf-text); }
.wf-about .legal {
  margin-top: 12px; padding-top: 9px;
  border-top: 1px solid var(--wf-line);
  font: 400 10px/1.6 var(--wf-mono);
  color: var(--wf-muted);
}
.wf-about .heat {
  height: 3px; width: 100%;
  background: var(--wf-molten);
  margin: 0 0 12px;
}