/* needsto.be-Skin für p2r3/convert. Wird per nginx sub_filter nach dem
   Upstream-CSS geladen; überschreibt nur Tokens, Schriften und Formen. */
@font-face { font-family: "Pixelify Sans"; src: url("PixelifySans-latin.woff2") format("woff2"); font-weight: 400 700; font-display: swap; }
@font-face { font-family: "DM Sans"; src: url("DMSans-var.woff2") format("woff2"); font-weight: 400 700; font-display: swap; }
@font-face { font-family: "DM Mono"; src: url("DMMono-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "DM Mono"; src: url("DMMono-500.woff2") format("woff2"); font-weight: 500; font-display: swap; }

:root, :root[data-theme="light"] {
  --ink: #25221f;
  --accent: #e8542d;
  --primary: #e8542d;
  --danger: #c4321b;
  --warning: #a8541c;
  --bg-page: #f7e9ce;
  --bg-card: #fbf1dd;
  --bg-card-alt: #f3e1c0;
  --bg-card-alt-hover: #efd6aa;
  --bg-section: #f1dfbd;
  --bg-input: #fbf1dd;
  --bg-light: #ead2a6;
  --bg-overlay: rgba(37, 34, 31, 0.45);
  --text-on-primary: #fff4df;
  --text-primary: #25221f;
  --text-secondary: #5f554b;
  --text-tertiary: #786e62;
  --text-muted: #786e62;
  --border-primary: #25221f;
  --border-secondary: #25221f;
  --btn-border: #25221f;
  --hard-shadow: 14px 14px 0 #e88d5c5e;
}

:root[data-theme="dark"] {
  --ink: #fff1d7;
  --accent: #ff985b;
  --primary: #ff985b;
  --danger: #ff6b4a;
  --warning: #efaa4b;
  --bg-page: #25221f;
  --bg-card: #302724;
  --bg-card-alt: #3a2f2a;
  --bg-card-alt-hover: #463830;
  --bg-section: #3a2f2a;
  --bg-input: #302724;
  --bg-light: #4a3b33;
  --bg-overlay: rgba(0, 0, 0, 0.6);
  --text-on-primary: #25221f;
  --text-primary: #fff1d7;
  --text-secondary: #d9c6a8;
  --text-tertiary: #a8957b;
  --text-muted: #a8957b;
  --border-primary: #8a6a58;
  --border-secondary: #b96b4d;
  --btn-border: #8a6a58;
  --hard-shadow: 14px 14px 0 #00000055;
}

html, body { font-family: "DM Sans", Arial, sans-serif; }
::selection { background: color-mix(in srgb, var(--accent) 30%, transparent); }
button:focus-visible, [role="button"]:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }

/* Marke: Quadrat-Logo + „needsto.be“ in Pixelify, Punkt orange */
.logo .logo-icon svg { display: none; }
.logo .logo-icon {
  width: 18px; height: 18px; transform: rotate(-12deg);
  background:
    linear-gradient(#f15b2a 0 0) 0 0 / 8px 8px no-repeat,
    linear-gradient(#efaa4b 0 0) 10px 0 / 8px 8px no-repeat,
    linear-gradient(#f58c3b 0 0) 0 10px / 8px 8px no-repeat,
    linear-gradient(#d94727 0 0) 10px 10px / 8px 8px no-repeat;
}
.logo:hover:not(:disabled) .logo-icon { transform: rotate(-57deg); }
.logo .logo-name { font-size: 0; letter-spacing: -0.04em; }
.logo .logo-name::before, .logo .logo-name::after { font: 700 1.9rem/1 "Pixelify Sans", monospace; }
.logo .logo-name::before { content: "needsto"; color: var(--text-primary); }
.logo .logo-name::after { content: ".be"; color: transparent; background: linear-gradient(90deg, #f15b2a 0 0.32em, var(--text-primary) 0.32em); -webkit-background-clip: text; background-clip: text; }

/* Startseite: harte Linien, versetzter Schatten wie das Terminal auf needsto.be */
.upload-card {
  border: 2px solid var(--border-primary);
  border-radius: 0;
  box-shadow: var(--hard-shadow);
  background: var(--bg-card);
  overflow: visible;
}
.upload-card .upload-card-header { flex-direction: column; align-items: center; gap: 0; }
.upload-card .upload-card-header::before,
.upload-card .upload-card-header::after {
  font: 700 clamp(2rem, 6vw, 3.1rem)/0.9 "Pixelify Sans", monospace;
  letter-spacing: -0.055em; text-align: center;
}
.upload-card .upload-card-header::after { content: "It needs to be"; order: 1; margin-top: 1.4rem; color: var(--text-primary); }
.upload-card .upload-card-header::before { content: "converted."; order: 2; color: var(--accent); }
.upload-card .upload-dropzone { border: 1px dashed var(--border-primary); border-radius: 0; background: transparent; }
.upload-card .upload-dropzone:hover { background: var(--bg-card-alt); border-color: var(--accent); border-style: solid; }
.upload-card .upload-dropzone .upload-icon-wrap { border-radius: 0; box-shadow: none; border: 1px solid var(--border-primary); color: var(--accent); }
.upload-card .upload-dropzone .upload-cta { color: var(--accent); }
.upload-card .upload-dropzone .upload-hint,
footer, .footer-item { font-family: "DM Mono", monospace; letter-spacing: 0.08em; text-transform: uppercase; }
.upload-card .upload-dropzone .upload-hint { font-size: 11px; }

/* Buttons und Chips: Pills mit dunkler Kontur wie die Wort-Buttons */
.styled-button { border-color: var(--btn-border); border-radius: 100px; color: var(--text-primary); background: transparent; }
.styled-button:enabled:hover, .styled-button:enabled:focus-visible { background: var(--ink); color: var(--bg-page); border-color: var(--ink); }
.styled-button.icon, .styled-button.compact { border-radius: 50%; }
.styled-button.primary { background: var(--accent); color: var(--text-on-primary); border-color: var(--accent); }
.styled-button.primary:enabled:hover { background: var(--ink); border-color: var(--ink); opacity: 1; }
.chip { border-radius: 100px; border-color: var(--border-primary); background: transparent; }
.chip.chip-active { background: var(--ink); border-color: var(--ink); color: var(--bg-page); }
.chip.chip-active .chip-icon { color: var(--bg-page); }

footer { background: transparent; border-top: 1px solid var(--border-primary); font-size: 10px; padding: 0.7rem clamp(1rem, 4vw, 2rem); }

/* Konvertierungsseite: eckige Karten, Suchfeld als Unterstrich wie das Wort-Eingabefeld */
.format-card, .fromto-pill, .explorer-dialog-btn, #popup button { border-radius: 0; }
.format-card .format-card-check, .format-card .format-card-plugin { border-radius: 0; }
.category-toggle { border-radius: 100px; }
.search-container .search-input-wrapper input { border-radius: 0; background: transparent; border: 0; border-bottom: 1px solid var(--border-primary); }
.search-container .search-input-wrapper input:focus { border-bottom-width: 2px; outline: 0; }
#popup { border: 2px solid var(--border-primary); border-radius: 0; box-shadow: var(--hard-shadow); }
@media (max-width: 540px) { :root, :root[data-theme] { --hard-shadow: 8px 8px 0 #e88d5c5e; } }