/* ============================================================
   theme.css — shared across all pages (trustablesecurity.com)
   Color system, base layout, nav, theme toggle, footer.
   Page-specific rules live in index.css / about.css / writing.css
   ============================================================ */

/* ---------- LIGHT (default) ---------- */
:root{
  --bg:#FBF9F5;        /* warm cream */
  --panel:#FFFFFF;
  --ink:#1A1A1D;
  --ink-soft:#3a3a3e;
  --muted:#6B6B70;
  --line:#E7E2D8;
  --accent:#14746F;    /* deep teal */
  --accent-soft:#E4EFEC;
  --shadow:0 1px 2px rgba(0,0,0,.04);
}
/* ---------- DARK (system) ---------- */
@media (prefers-color-scheme: dark){
  :root:not([data-theme]){
    --bg:#0F1214;
    --panel:#171B1E;
    --ink:#ECEFF1;
    --ink-soft:#C4CBD0;
    --muted:#8B949E;
    --line:#262C31;
    --accent:#4FD1C5;     /* brighter teal for dark */
    --accent-soft:#123833;
    --shadow:none;
  }
}
/* ---------- DARK (manual override) ---------- */
:root[data-theme="dark"]{
  --bg:#0F1214;
  --panel:#171B1E;
  --ink:#ECEFF1;
  --ink-soft:#C4CBD0;
  --muted:#8B949E;
  --line:#262C31;
  --accent:#4FD1C5;
  --accent-soft:#123833;
  --shadow:none;
}
:root[data-theme="light"]{
  --bg:#FBF9F5;--panel:#FFFFFF;--ink:#1A1A1D;--ink-soft:#3a3a3e;--muted:#6B6B70;
  --line:#E7E2D8;--accent:#14746F;--accent-soft:#E4EFEC;--shadow:0 1px 2px rgba(0,0,0,.04);
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:var(--bg);color:var(--ink);
  font-family:"Sofia Pro","Proxima Nova",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  font-size:18px;line-height:1.6;-webkit-font-smoothing:antialiased;
  transition:background .25s ease,color .25s ease;
}
.wrap{max-width:720px;margin:0 auto;padding:0 28px}
h1,h2,h3{font-family:"Minerva Modern",Georgia,"Times New Roman",serif;font-weight:500;letter-spacing:-.01em;line-height:1.15}

/* nav */
nav{display:flex;align-items:center;justify-content:space-between;padding:34px 0}
.brand{display:flex;align-items:center;gap:14px}
.mono{width:38px;height:38px;border-radius:9px;background:var(--ink);color:var(--bg);
  display:grid;place-items:center;font-family:Georgia,serif;font-size:16px;letter-spacing:.02em;text-decoration:none}
.navlinks{display:flex;align-items:center}
.navlinks a{color:var(--ink);text-decoration:none;margin-left:26px;font-size:15px;opacity:.75}
.navlinks a:hover{opacity:1;color:var(--accent)}
.navlinks a.active{opacity:1;color:var(--accent)}

/* theme toggle */
.toggle{margin-left:26px;width:38px;height:38px;border-radius:9px;border:1px solid var(--line);
  background:var(--panel);color:var(--ink);cursor:pointer;display:grid;place-items:center;
  box-shadow:var(--shadow);transition:border-color .2s,color .2s}
.toggle:hover{border-color:var(--accent);color:var(--accent)}
.toggle svg{width:18px;height:18px}
.toggle .moon{display:none}
:root[data-theme="dark"] .toggle .moon,
:root:not([data-theme]) .toggle .moon{display:block}
:root[data-theme="dark"] .toggle .sun,
:root:not([data-theme]) .toggle .sun{display:none}
@media (prefers-color-scheme: light){
  :root:not([data-theme]) .toggle .moon{display:none}
  :root:not([data-theme]) .toggle .sun{display:block}
}
:root[data-theme="light"] .toggle .sun{display:block}
:root[data-theme="light"] .toggle .moon{display:none}

/* shared post list (home + writing) */
.post{display:block;text-decoration:none;color:inherit;padding:20px 0;border-bottom:1px solid var(--line)}
.post:last-child{border-bottom:none}
.post .date{color:var(--muted);font-size:13px;letter-spacing:.04em;text-transform:uppercase}
.post:hover h3{color:var(--accent)}

/* shared eyebrow + cta */
.eyebrow{color:var(--accent);font-size:14px;letter-spacing:.08em;text-transform:uppercase;font-weight:600;margin-bottom:18px}
.cta{display:inline-flex;align-items:center;gap:10px;background:var(--ink);color:var(--bg);
  text-decoration:none;padding:13px 22px;border-radius:10px;font-size:16px;font-weight:500;transition:background .2s}
.cta:hover{background:var(--accent)}

/* footer */
footer{border-top:1px solid var(--line);margin-top:60px;padding:40px 0 70px;color:var(--muted);font-size:15px;
  display:flex;justify-content:space-between;flex-wrap:wrap;gap:16px}
footer a{color:var(--ink);text-decoration:none;opacity:.7;margin-left:20px}
footer a:first-child{margin-left:0}
footer a:hover{color:var(--accent);opacity:1}

/* shared responsive nav */
@media(max-width:600px){
  nav{padding:24px 0}.navlinks a{margin-left:16px}.toggle{margin-left:16px}
}