/* ---- theme tokens ---------------------------------------------------
   Light and dark are just two value-sets for the same named colors.
   Everything below references the tokens, never raw hex. */
:root, [data-theme="light"] {
  --bg:        #faf9f5;   /* warm paper white */
  --surface:   #ffffff;   /* cards, inputs */
  --fg:        #1f1e1c;   /* warm near-black ink */
  --muted:     #6b6862;   /* secondary text */
  --line:      #e6e3dc;   /* hairlines, borders */
  --accent:    #c96442;   /* clay / terracotta */
  --accent-fg: #ffffff;   /* text on accent */
  --code-bg:   #f3f1ea;
}
[data-theme="dark"] {
  --bg:        #1f1e1c;   /* warm near-black */
  --surface:   #29272400;
  --surface:   #2a2825;
  --fg:        #eeece4;   /* warm off-white ink */
  --muted:     #a8a49b;
  --line:      #3a3733;
  --accent:    #e08163;   /* slightly lighter clay for dark */
  --accent-fg: #1f1e1c;
  --code-bg:   #2a2825;
}

* { box-sizing: border-box; }

html { background: var(--bg); }

body {
  font: 17px/1.65 -apple-system, system-ui, "Segoe UI", sans-serif;
  color: var(--fg); background: var(--bg);
  max-width: 640px; margin: 0 auto; padding: 60px 24px;
  transition: background .2s ease, color .2s ease;
}

a { color: var(--fg); text-decoration: none;
    border-bottom: 1px solid var(--line); }
a:hover { border-color: var(--accent); }

/* header + theme toggle */
header { margin-bottom: 48px; display: flex;
         justify-content: space-between; align-items: center; }
header h1 { font-size: 22px; margin: 0; letter-spacing: -0.02em; }
header h1 a { border: none; }
#theme-toggle {
  background: none; border: 1px solid var(--line); color: var(--muted);
  border-radius: 999px; width: 34px; height: 34px; cursor: pointer;
  font-size: 15px; line-height: 1; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  transition: border-color .2s, color .2s;
}
#theme-toggle:hover { border-color: var(--accent); color: var(--accent); }

/* post list */
.post-list { list-style: none; padding: 0; }
.post-list li { margin-bottom: 20px; }
.post-list .date { color: var(--muted); font-size: 14px; margin-right: 12px; }
.post-list a { border: none; }
.post-list a:hover { color: var(--accent); }

/* single post */
article h1 { font-size: 28px; letter-spacing: -0.02em; }
article .date { color: var(--muted); font-size: 14px; }
article .body { margin-top: 24px; }
article .body h1, article .body h2, article .body h3 {
  letter-spacing:-0.02em; margin-top:1.4em; }
article .body p { margin: 1em 0; }
article .body ul, article .body ol { padding-left: 1.4em; }
article .body blockquote {
  border-left:3px solid var(--accent); margin:1em 0;
  padding-left:1em; color:var(--muted); }
article .body pre {
  background:var(--code-bg); padding:12px 16px; border-radius:6px;
  overflow-x:auto; font-size:14px; }
article .body code {
  background:var(--code-bg); padding:2px 5px; border-radius:4px;
  font-size:0.9em; }
article .body pre code { background:none; padding:0; }
article .body img { max-width:100%; height:auto; border-radius:6px; }
article .body a { border-bottom:1px solid var(--line); }
article .body a:hover { border-color: var(--accent); }

/* forms / admin */
input, textarea {
  width: 100%; padding: 10px; margin: 8px 0; font: inherit;
  border: 1px solid var(--line); border-radius: 6px;
  background: var(--surface); color: var(--fg); }
textarea { min-height: 220px; resize: vertical; }
button {
  font: inherit; padding: 8px 18px; border: 1px solid var(--accent);
  background: var(--accent); color: var(--accent-fg);
  border-radius: 6px; cursor: pointer; }
button.ghost { background: var(--surface); color: var(--fg);
               border-color: var(--line); }
.flash { color: var(--accent); font-size: 14px; }
.admin-item { display: flex; justify-content: space-between;
  align-items: center; border-bottom: 1px solid var(--line); padding: 10px 0; }
.admin-item form { margin: 0; }
.admin-item button { padding: 4px 10px; font-size: 13px; }
footer { margin-top: 60px; color: var(--muted); font-size: 13px; }
footer a { border: none; color: var(--muted); }
footer a:hover { color: var(--accent); }