/* =========================================================
   SYNTHPAPER — CORE THEME (GLOBAL)
   Keep this file for site-wide tokens, base, generic components.
   Page-specific styles go in /assets/css/<page>.css
   ========================================================= */

/* ---------- Tokens ---------- */
:root{
  /* Dark (default) */
  --bg:#0e0f12;
  --surface:#111318;
  --surface-2:#12141a;
  --card:#17181c;
  --hairline:#242833;
  --hairline-2:#2a2f38;
  --hairline-soft:#26282e;
  --text:#e9ecf1;
  --muted:#9aa6b2;
  --muted-2:#a7b0bd;
  --link:#cdd8ff;
  --link-hover:#e5ecff;
  --link-visited:#c3b7ff;
  --acc:#35a2ff;
  --ring:#4c78ff55;
  --shadow:0 8px 24px rgba(0,0,0,.35);
}

:root[data-theme='light']{
  --bg:#f6f7fb;
  --surface:#ffffff;
  --surface-2:#ffffff;
  --card:#ffffff;
  --hairline:#e6e9ef;
  --hairline-2:#d8dde7;
  --hairline-soft:#e6e9ef;
  --text:#101217;
  --muted:#667085;
  --muted-2:#596275;
  --link:#1a73e8;
  --link-hover:#0b5ed7;
  --link-visited:#4e46e5;
  --acc:#1a73e8;
  --ring:#1a73e84d;
}

/* ---------- Base ---------- */
*{ box-sizing:border-box }
html{ -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale }
body{
  margin:0; font:16px/1.6 system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,Arial,sans-serif;
  background:var(--bg); color:var(--text);
}
a{ color:var(--link); text-decoration:none }
a:hover{ color:var(--link-hover); text-decoration:underline }
a:visited{ color:var(--link-visited) }
:focus-visible{ outline:2px solid var(--acc); box-shadow:0 0 0 4px var(--ring); border-radius:8px }
.container{ max-width:1180px; padding:16px; margin:0 auto }

/* ---------- Generic Grid & Cards (shared) ---------- */
.grid{ display:grid; gap:18px; grid-template-columns:repeat(12,1fr) }
.card{
  grid-column:span 6;
  background:var(--card); padding:16px; border-radius:14px; border:1px solid var(--hairline);
  box-shadow:0 1px 0 rgba(255,255,255,.02); transition:transform .08s ease, box-shadow .12s ease;
}
.card:hover{ transform:translateY(-1px); box-shadow:var(--shadow) }
.card img{ width:100%; border-radius:10px; object-fit:cover; display:block }
@supports (aspect-ratio:16/9){ .card img{ aspect-ratio:16/9; height:auto } }
.card h2{ margin:.6rem 0; font-size:22px; line-height:1.25; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden }
.card a{ color:inherit; text-decoration:none }
.card a:hover{ text-decoration:none }
.card p{ display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden }
@media (min-width:1200px){ .card{ grid-column:span 4 } }
@media (max-width:720px){ .card{ grid-column:span 12 } }

.byline{ display:flex; gap:8px; align-items:center; color:var(--muted); font-size:14px; margin:.3rem 0 .6rem }
.byline .avatar{ width:30px; height:30px; border-radius:50%; object-fit:cover; border:1px solid var(--hairline-2) }

/* ---------- Forms / Buttons / Flash ---------- */
textarea,input{
  width:100%; background:#0f1116; border:1px solid var(--hairline-2); color:var(--text);
  border-radius:8px; padding:10px;
}
.btn{
  background:var(--acc); color:#0b0e14; padding:8px 12px; border-radius:8px; border:1px solid transparent;
  text-decoration:none; font-weight:600; display:inline-block;
}
.btn:hover{ filter:brightness(1.08) }
.btn:active{ transform:translateY(1px) }
.btn.ghost{ background:transparent; color:#cbd3df; border:1px solid var(--hairline-2) }

.flash.ok{ background:#103b24; color:#b6ffd8; padding:10px; border-radius:8px; margin:10px 0 }
.flash.err{ background:#401616; color:#ffb6b6; padding:10px; border-radius:8px; margin:10px 0 }

/* ---------- Tables (admin/shared) ---------- */
.table{
  width:100%; border-collapse:collapse; background:var(--card); border:1px solid var(--hairline); border-radius:12px; overflow:hidden;
}
.table th,.table td{ padding:10px; border-bottom:1px solid var(--hairline-2); vertical-align:top }
.table tr:last-child td{ border-bottom:none }
.tright{ text-align:right }

/* ---------- Footer ---------- */
.site-footer{ margin-top:32px; background:var(--surface); border-top:1px solid var(--hairline) }
.footer-grid{ display:grid; grid-template-columns:2fr 3fr; gap:24px; padding:24px 16px }
.footer-brand .logo{ font-weight:900; font-size:22px; margin-bottom:6px }
.footer-brand .tagline{ color:var(--muted-2); margin:0 0 8px }
.footer-brand .disclaimer{ color:#8c96a3; font-size:14px; margin:8px 0 0 }
.footer-links{ display:grid; grid-template-columns:repeat(3,minmax(140px,1fr)); gap:16px }
.footer-links h4{ font-size:14px; color:#cbd3df; margin:0 0 8px }
.footer-links ul{ list-style:none; padding:0; margin:0 }
.footer-links a{ color:var(--muted-2); text-decoration:none }
.footer-links a:hover{ text-decoration:underline }
.footer-bottom{ border-top:1px solid var(--hairline); padding:10px 0; color:#8c96a3; font-size:13px }
.footer-grid, .footer-links, .footer-links .col, .footer-links ul{ min-width:0 }
.footer-links ul li{ overflow-wrap:anywhere }
@media (max-width:880px){
  .footer-grid{ grid-template-columns:1fr; gap:18px; padding:18px 16px }
  .footer-links{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px }
}
@media (max-width:420px){ .footer-links{ grid-template-columns:1fr } }

/* ---------- Utilities ---------- */
.page, .page-wrap{ overflow-x:hidden }
.pager{ display:flex; gap:10px; align-items:center; justify-content:center; margin:16px 0; color:var(--muted-2) }