/* TorahScrolls site pages (landing, sign-in, account). Same tokens as the reader. */
:root{
  --bg:#F3F2EE; --surface:#FFFFFF; --raised:#ECEAE3; --ink:#161A2B; --muted:#5D6375; --line:#DCD8CE;
  --accent:#1450CC; --accent-ink:#FFFFFF; --accent-soft:#E2EAFB; --gold:#8F6E22; --gold-soft:#F1E7CF;
  --danger:#A3322B; --danger-soft:#F8E3E1; --ok:#2F6B3C; --ok-soft:#E1F0E4;
  --hero-a:#0A3FB0; --hero-b:#1C7BF0;
  --shadow:0 14px 36px rgba(22,26,43,.12);
  --f-display:"Spectral", Georgia, "Times New Roman", serif;
  --f-ui:"IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-he:"Frank Ruhl Libre", "Noto Serif Hebrew", "Times New Roman", serif;
  --r:16px;
  color-scheme:light;
}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){
  --bg:#0C1222; --surface:#141B30; --raised:#1B2440; --ink:#ECE7DA; --muted:#98A0B8; --line:#273152;
  --accent:#8AB4FF; --accent-ink:#0A1020; --accent-soft:#1C2A52; --gold:#D7B260; --gold-soft:#2B2717;
  --danger:#F08B82; --danger-soft:#3A1E1E; --ok:#86C795; --ok-soft:#1A2E21;
  --hero-a:#0A2A78; --hero-b:#1557C8;
  --shadow:0 14px 36px rgba(0,0,0,.45);
  color-scheme:dark;
}}
:root[data-theme="dark"]{
  --bg:#0C1222; --surface:#141B30; --raised:#1B2440; --ink:#ECE7DA; --muted:#98A0B8; --line:#273152;
  --accent:#8AB4FF; --accent-ink:#0A1020; --accent-soft:#1C2A52; --gold:#D7B260; --gold-soft:#2B2717;
  --danger:#F08B82; --danger-soft:#3A1E1E; --ok:#86C795; --ok-soft:#1A2E21;
  --hero-a:#0A2A78; --hero-b:#1557C8;
  --shadow:0 14px 36px rgba(0,0,0,.45);
  color-scheme:dark;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--f-ui);font-size:16px;line-height:1.55;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
img{max-width:100%;display:block}
a{color:var(--accent)}
[hidden]{display:none!important}
h1,h2,h3{margin:0;text-wrap:balance;font-family:var(--f-display);font-weight:600;line-height:1.15}
p{margin:0}
button{font:inherit;color:inherit;cursor:pointer}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:6px}
.wrap{max-width:1080px;margin:0 auto;padding-left:max(20px, env(safe-area-inset-left,0px));padding-right:max(20px, env(safe-area-inset-right,0px))}
.narrow{max-width:460px}

/* header */
.top{display:flex;align-items:center;gap:12px;padding-block:14px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink);font-family:var(--f-display);font-size:20px;font-weight:600}
.brand img{width:34px;height:34px;border-radius:9px}
.brand i{font-weight:400;color:var(--muted)}
.top .spacer{flex:1}
.top .link{color:var(--ink);text-decoration:none;font-weight:500;padding:10px 12px;border-radius:10px}
.top .link:hover{background:var(--raised)}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:48px;padding:0 22px;border-radius:12px;border:1px solid var(--line);background:var(--surface);color:var(--ink);font-weight:600;font-size:16px;text-decoration:none;white-space:nowrap}
.btn:hover{border-color:var(--accent)}
.btn.primary{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.btn.primary:hover{filter:brightness(1.07)}
.btn.block{width:100%}
.btn.small{min-height:40px;padding:0 16px;font-size:15px}
.btn.danger{color:var(--danger);border-color:var(--danger)}
.btn[disabled]{opacity:.55;cursor:default}
.btn svg{width:20px;height:20px}
.textlink{background:none;border:0;padding:0;color:var(--accent);font-weight:500;text-decoration:underline;text-underline-offset:3px}

/* forms */
label{display:block;font-weight:600;font-size:14px;margin-bottom:6px}
input[type=email],input[type=password],input[type=text]{width:100%;font:inherit;color:var(--ink);background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:12px 14px;min-height:50px}
input:focus{border-color:var(--accent);outline:none;box-shadow:0 0 0 3px var(--accent-soft)}
.field{display:flex;flex-direction:column;gap:2px}
.hint{font-size:13.5px;color:var(--muted)}
.msg{padding:12px 14px;border-radius:12px;font-size:15px}
.msg.err{background:var(--danger-soft);color:var(--danger)}
.msg.ok{background:var(--ok-soft);color:var(--ok)}
.or{display:flex;align-items:center;gap:12px;color:var(--muted);font-size:14px}
.or::before,.or::after{content:"";flex:1;height:1px;background:var(--line)}
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:24px}
.stack{display:flex;flex-direction:column;gap:16px}
.row{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.muted{color:var(--muted)}
.small{font-size:14px}
.tabs2{display:grid;grid-template-columns:1fr 1fr;background:var(--raised);border-radius:12px;padding:4px;gap:4px}
.tabs2 button{border:0;background:none;padding:10px;border-radius:9px;font-weight:600;color:var(--muted);min-height:44px}
.tabs2 button[aria-pressed="true"]{background:var(--surface);color:var(--ink);box-shadow:0 1px 3px rgba(0,0,0,.12)}
.spin{width:18px;height:18px;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
footer.foot{border-top:1px solid var(--line);margin-top:64px;padding-block:28px;color:var(--muted);font-size:14px}
footer.foot .row a{color:var(--muted)}
@media (prefers-reduced-motion: reduce){.spin{animation:none}}
