/* Lingua Paper — Design Tokens for language-learning */

:root{
  --bg-paper:#FFFBF2;
  --bg-surface:#FFFFFF;
  --bg-ink:#111827;
  --bg-hover:#F9FAF7;
  --bg-active:#EEF2FF;
  --text-primary:#111827;
  --text-secondary:#4B5563;
  --text-muted:#9CA3AF;
  --text-on-dark:#FFFFFF;
  --border:#E7E0D6;
  --border-strong:#D6D3CD;
  --shadow-sm:0 1px 2px rgba(17,24,39,.06), 0 4px 12px rgba(17,24,39,.05);
  --shadow-md:0 8px 24px rgba(17,24,39,.08), 0 2px 8px rgba(17,24,39,.06);
  --radius-sm:10px;
  --radius-md:16px;
  --radius-lg:22px;
  --radius-xl:28px;
  /* Accents */
  --vocab:#3730A3; /* indigo for wordbook */
  --vocab-soft:#EEF2FF;
  --prose:#0F766E; /* teal for folread */
  --prose-soft:#CCFBF1;
  --speak:#FF4D2E;
  --success:#059669;
  --warning:#D97706;
  --danger:#DC2626;
  --font-display: Georgia, "Times New Roman", "Songti SC", "SimSun", serif;
  --font-body: system-ui, -apple-system, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --transition:180ms cubic-bezier(.2,.8,.2,1);
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:var(--font-body);
  background:var(--bg-paper);
  color:var(--text-primary);
  -webkit-font-smoothing:antialiased;
  line-height:1.6;
}
/* subtle paper grain */
body::before{
  content:"";
  position:fixed; inset:0; pointer-events:none; opacity:.35;
  background-image:radial-gradient(rgba(17,24,39,.07) 1px, transparent 1px);
  background-size:18px 18px;
  mask-image:linear-gradient(to bottom, black 60%, transparent 100%);
}
a{color:var(--vocab); text-decoration:none}
a:hover{text-decoration:underline}

/* focus */
:focus-visible{outline:2px solid var(--vocab); outline-offset:2px; border-radius:6px}

/* utility */
.container{max-width:1120px; margin:0 auto; padding:0 20px}
.mono{font-family:var(--font-mono); font-size:.72rem; letter-spacing:.06em; text-transform:uppercase}
.sr-only{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0)}

/* buttons */
.btn{
  appearance:none; border:1px solid transparent; border-radius:999px;
  padding:10px 18px; font-weight:600; font-size:.92rem; line-height:1.2;
  display:inline-flex; align-items:center; justify-content:center; gap:8px; cursor:pointer;
  transition:var(--transition); white-space:nowrap; min-height:40px;
}
.btn-primary{background:var(--bg-ink); color:var(--text-on-dark); border-color:var(--bg-ink)}
.btn-primary:hover{background:#1F2937; transform:translateY(-1px)}
.btn-primary:active{transform:none}
.btn-ghost{background:var(--bg-surface); border-color:var(--border); color:var(--text-primary)}
.btn-ghost:hover{background:var(--bg-hover); border-color:var(--border-strong)}
.btn:disabled{opacity:.5; cursor:not-allowed; transform:none !important}

/* inputs */
.field{width:100%; padding:12px 14px; border:1px solid var(--border); border-radius:12px; background:var(--bg-surface); font:inherit; color:var(--text-primary); transition:var(--transition); min-height:44px}
.field:focus{border-color:var(--vocab); box-shadow:0 0 0 4px rgba(55,48,163,.12); outline:none}
.field::placeholder{color:var(--text-muted)}

/* top nav */
.topbar{
  position:sticky; top:0; z-index:40;
  backdrop-filter:saturate(180%) blur(12px);
  background:rgba(255,251,242,.78);
  border-bottom:1px solid var(--border);
}
.topbar-inner{max-width:1120px; margin:0 auto; padding:14px 20px; display:flex; align-items:center; gap:16px}
.brand{font-family:var(--font-display); font-size:1.35rem; font-weight:600; letter-spacing:-.02em; display:flex; align-items:baseline; gap:10px}
.brand-mark{width:28px; height:28px; border-radius:9px; background:var(--bg-ink); color:white; display:grid; place-items:center; font-family:var(--font-mono); font-size:.7rem; flex-shrink:0}
.brand small{font-family:var(--font-mono); font-size:.62rem; letter-spacing:.14em; color:var(--text-muted); font-weight:500}

/* Breakpoint 1: 平板端 (768px – 1024px) */
@media (min-width: 768px) and (max-width: 1024px){
  .container{padding:0 16px}
  .topbar-inner{padding:12px 16px}
}

/* Breakpoint 2: 手机端 (< 768px) */
@media (max-width: 767px){
  .container{padding:0 12px}
  .topbar-inner{padding:10px 12px; gap:10px}
  .brand{font-size:1.15rem; gap:8px}
  .brand small{display:none}
  .btn{min-height:44px; padding:10px 16px}
}

/* Breakpoint 3: 极窄屏 (< 360px) */
@media (max-width: 359px){
  .brand{font-size:1.02rem}
  .topbar-inner{padding:8px 10px}
}

@media (prefers-reduced-motion:reduce){
  *{transition:none !important; animation:none !important}
}