/* Shared theme + base styles for the SYNERJOY CMS tool pages
   (index.html, post-editor.html and the other tools).

   Theme: follows the OS by default (`color-scheme: light dark` + light-dark()),
   overridden by <html data-theme="light|dark"> which tools.js sets from
   localStorage. */

:root {
  color-scheme: light dark;

  --bg:        light-dark(#fafafa, #17181a);
  --surface:   light-dark(#ffffff, #1f2123);
  --surface-2: light-dark(#f3f4f6, #2a2d31);
  --line:      light-dark(#e2e2e2, #3a3d42);
  --border:    var(--line);
  --text:      light-dark(#1c1c1c, #e7e8ea);
  --muted:     light-dark(#6b7280, #9aa1a9);
  --text-muted: var(--muted);

  --accent:    light-dark(#bc3d3d, #e06a6a);
  --on-accent: #ffffff;

  --ok:        light-dark(#15803d, #56d98a);
  --ok-bg:     light-dark(#f0fdf4, #10241a);
  --warn:      light-dark(#92400e, #f0b366);
  --warnbg:    light-dark(#fffbeb, #2a2110);
  --bad:       light-dark(#b91c1c, #f87171);
  --badbg:     light-dark(#fef2f2, #2a1414);

  --overlay:   light-dark(rgba(0,0,0,.5), rgba(0,0,0,.65));
  --shadow:    light-dark(rgba(0,0,0,.08), rgba(0,0,0,.5));
}

:root[data-theme="light"] { color-scheme: light; }
:root[data-theme="dark"]  { color-scheme: dark; }

* { box-sizing: border-box; }

body {
  font: 15px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  margin: 0;
  color: var(--text);
  background: var(--bg);
}

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 20px;
  margin-bottom: 16px;
}

label { display: block; font-weight: 600; font-size: 13px; margin-bottom: 6px; }

input[type=text], input[type=password], input[type=email], input[type=file], input[type=date], input[type=time], input[type=number], input[type=search], select, textarea {
  width: 100%;
  padding: 9px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font: inherit;
  color: var(--text);
  background: var(--surface);
}
input[type=file] { padding: 7px 10px; }

button {
  font: inherit; font-weight: 600;
  padding: 9px 16px; border-radius: 999px; border: 0; cursor: pointer;
  background: var(--accent); color: var(--on-accent);
}
button.secondary {
  background: var(--surface); color: var(--accent);
  border: 1px solid var(--accent);
}
button:disabled { opacity: .45; cursor: not-allowed; }

.hint { color: var(--muted); font-size: 13px; }
code {
  background: var(--surface-2); color: var(--text);
  padding: 1px 5px; border-radius: 4px; font-size: 12px;
}
.hidden { display: none !important; }

/* nav on the tool pages */
.toolnav { font-size: 13px; margin-bottom: 14px; color: var(--muted); }
.toolnav a { color: var(--accent); text-decoration: none; }
.toolnav a.home { font-weight: 600; }

/* theme switch (injected by tools.js) */
#themeToggle {
  position: fixed; top: 12px; right: 12px; z-index: 200;
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--surface); color: var(--muted);
  border: 1px solid var(--border); border-radius: 999px;
  padding: 6px 12px; font: 600 12px/1 system-ui, sans-serif; cursor: pointer;
  box-shadow: 0 2px 8px var(--shadow);
}
#themeToggle:hover { color: var(--text); }