/*
 * DumbPad (pad.as47526.net) — Design von handily networks.
 * Wird von nginx per sub_filter nach den DumbPad-Stylesheets eingehängt (Image unverändert).
 * Farben und Schriften wie src/styles/global.css der Website; beide DumbPad-Themes
 * bekommen dieselbe dunkle Palette, der Umschalter ist ausgeblendet.
 */

@font-face{font-family:"Source Sans 3 Variable";font-style:normal;font-display:swap;font-weight:200 900;src:url(fonts/source-sans-3-latin-ext-wght.woff2) format("woff2-variations");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Source Sans 3 Variable";font-style:normal;font-display:swap;font-weight:200 900;src:url(fonts/source-sans-3-latin-wght.woff2) format("woff2-variations");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Space Grotesk";font-style:normal;font-display:swap;font-weight:600;src:url(fonts/space-grotesk-latin-ext-600.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Space Grotesk";font-style:normal;font-display:swap;font-weight:600;src:url(fonts/space-grotesk-latin-600.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-display:swap;font-weight:400;src:url(fonts/ibm-plex-mono-latin-ext-400.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-display:swap;font-weight:400;src:url(fonts/ibm-plex-mono-latin-400.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

:root,
[data-theme="light"],
[data-theme="dark"]{
  --hn-ink:#0a0f1a;--hn-ink-2:#0f1626;--hn-ink-3:#141d31;--hn-line:#1f2a44;
  --hn-text:#e7ecf5;--hn-text-dim:#93a0b8;
  --hn-amber:#ffb454;--hn-amber-dim:#b97f33;--hn-green:#4ade80;
  --hn-sans:"Source Sans 3 Variable","Source Sans 3",system-ui,sans-serif;
  --hn-disp:"Space Grotesk",var(--hn-sans);
  --hn-mono:"IBM Plex Mono",ui-monospace,monospace;

  color-scheme:dark;
  --bg-color:var(--hn-ink);
  --text-color:var(--hn-text);
  --primary-color:var(--hn-amber);
  --secondary-color:var(--hn-line);
  --header-bg:rgba(10,15,26,.85);
  --textarea-bg:var(--hn-ink-2);
  --success-status-bg:rgba(74,222,128,.35);
  --danger-status-bg:rgba(248,113,113,.4);
  --modal-overlay:rgba(5,8,14,.7);
  --modal-bg:var(--hn-ink-2);
  --button-hover:var(--hn-ink-3);
  --danger-color:#f87171;
  --danger-hover:#ef4444;
  --code-markdown:rgba(255,180,84,.14);
}

body{
  font-family:var(--hn-sans);
  background:
    radial-gradient(600px 320px at 85% 0,rgba(255,180,84,.06),transparent 70%),
    radial-gradient(500px 300px at 0 100%,rgba(74,222,128,.04),transparent 70%),
    var(--hn-ink);
  background-attachment:fixed;
}
::selection{background:var(--hn-amber);color:var(--hn-ink)}
:focus-visible{outline:2px solid var(--hn-amber);outline-offset:2px}
h1,h2,h3,.modal-content h2,.pin-header h2{font-family:var(--hn-disp);font-weight:600;letter-spacing:-.01em}

/* Kopfzeile wie der Header der Website, mit Bildmarke */
header{border:1px solid var(--hn-line);box-shadow:none;backdrop-filter:blur(12px)}
/* app.js ersetzt das h1 durch reinen Text in #header-title */
#header-title,#header-title h1{display:flex;align-items:center;gap:10px;font-family:var(--hn-disp)!important;font-weight:600;color:var(--hn-text)}
#header-title::before{content:"";width:30px;height:30px;flex:none;background:url(handily-logo.svg) center/contain no-repeat}
#theme-toggle{display:none!important}

/* Editor und Vorschau */
#editor,#preview-pane{font-family:var(--hn-mono);font-size:.95rem}
#preview-pane{font-family:var(--hn-sans);font-size:1rem}
#editor::placeholder{color:var(--hn-text-dim)}
.editor-container,.preview-container,main{border-color:var(--hn-line)}
main{background-color:var(--hn-ink-2);border:1px solid var(--hn-line);box-shadow:none}
#preview-pane a{color:var(--hn-amber)}
#preview-pane code,#preview-pane pre{font-family:var(--hn-mono)}

/* Bedienelemente */
#notepad-selector,.modal-input,#search-modal input{background-color:var(--hn-ink-2);border:1px solid var(--hn-line);color:var(--hn-text);font-family:var(--hn-sans)}
#notepad-selector:focus,.modal-input:focus,#search-modal input:focus{border-color:var(--hn-amber-dim);outline:none;box-shadow:0 0 0 .2rem rgba(255,180,84,.2)}
.icon-button{color:var(--hn-text-dim)}
.icon-button:hover{color:var(--hn-text)}
.modal-content{border:1px solid var(--hn-line);border-radius:14px}
.modal-buttons button{font-family:var(--hn-disp);font-weight:600;border-radius:10px}
#rename-confirm,#download-txt,#download-md,#settings-save,.modal-buttons button.primary,#pin-modal .modal-buttons button.primary{background-color:var(--hn-amber);color:var(--hn-ink);border-color:var(--hn-amber)}
#rename-confirm:hover,#download-txt:hover,#download-md:hover,#settings-save:hover,.modal-buttons button.primary:hover,#pin-modal .modal-buttons button.primary:hover{background-color:#ffc070}
#rename-cancel,#download-cancel,#settings-cancel{background-color:var(--hn-ink-3);color:var(--hn-text);border:1px solid var(--hn-line)}
#search-results .selected{background-color:var(--hn-ink-3)}
#search-results mark{background:rgba(255,180,84,.3);color:var(--hn-text)}
#settings-modal input[type="checkbox"]:checked,#settings-modal input[type="radio"]:checked{background-color:var(--hn-amber);border-color:var(--hn-amber)}
.toast{font-family:var(--hn-sans);border:1px solid var(--hn-line)}
.tooltip{background:var(--hn-ink-3);color:var(--hn-text);border:1px solid var(--hn-line);font-family:var(--hn-sans)}

@media(prefers-reduced-motion:reduce){*{transition:none!important}}