/* ============================================================
   Synchrorate — shared brand stylesheet (light design system)
   Tokens extracted from landing.html :root (2026-08-17).
   Link on the simple pages: <link rel="stylesheet" href="/brand.css">
   Provides tokens + typography + form + link + button base.
   Pages keep their own layout rules (recoloured to var(--sr-*)).
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,500;9..144,600&family=Noto+Sans+TC:wght@400;500;600;700;900&family=Noto+Serif+TC:wght@600;700&display=swap');

:root{
  --sr-paper:#FFFFFF; --sr-surface:#FFFFFF; --sr-sunk:#F4F2EC;
  --sr-ink:#17212E; --sr-muted:#586274; --sr-line:#E8E5DD;
  --sr-brit:#213A87; --sr-brit-deep:#152A63; --sr-brit-tint:#E9EDF7; --sr-on-brit:#FFFFFF;
  --sr-gold:#CBA135; --sr-gold-lit:#E7C65C; --sr-gold-wash:#FBF3D6; --sr-gold-deep:#8A6A18;
  --sr-amber:#CD9440; --sr-success:#3C7A50; --sr-wine:#C13A4B;
  --sr-sans:'Noto Sans TC',system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --sr-serif:'Fraunces','Noto Serif TC',Georgia,serif;
}

*{ box-sizing:border-box; }

body{
  margin:0; background:var(--sr-paper); color:var(--sr-ink);
  font-family:var(--sr-sans); line-height:1.75;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}

/* ---- typography ---- */
h1{ font-family:var(--sr-serif); font-weight:600; font-size:clamp(27px,4vw,38px);
  letter-spacing:-.015em; line-height:1.15; color:var(--sr-ink); margin:0 0 .45em; }
h2{ font-size:19px; font-weight:700; color:var(--sr-ink); margin:32px 0 8px; letter-spacing:-.01em; }
h3{ font-size:16px; font-weight:700; color:var(--sr-ink); margin:20px 0 6px; }
p,li{ color:var(--sr-muted); font-size:15px; }
strong,b{ color:var(--sr-ink); font-weight:600; }
a{ color:var(--sr-brit); text-decoration:none; }
a:hover{ text-decoration:underline; }
hr{ border:0; border-top:1px solid var(--sr-line); margin:28px 0; }
.meta,.muted{ color:var(--sr-muted); font-size:13px; }

/* ---- doc container (legal / text pages) ---- */
.wrap,.sr-doc{ max-width:820px; margin:0 auto; padding:clamp(32px,6vw,52px) 22px 72px; }

/* ---- back link ---- */
.sr-back{ display:inline-flex; align-items:center; gap:7px; color:var(--sr-muted);
  font-size:14px; font-weight:500; margin-bottom:14px; }
.sr-back:hover{ color:var(--sr-brit); text-decoration:none; }

/* ---- forms ---- */
label{ display:block; margin:15px 0 5px; font-size:13px; font-weight:600; color:var(--sr-ink); }
input,select,textarea{
  width:100%; box-sizing:border-box; padding:11px 13px; border-radius:10px;
  border:1px solid var(--sr-line); background:var(--sr-surface); color:var(--sr-ink);
  font:inherit; transition:border-color .2s, box-shadow .2s;
}
input::placeholder,textarea::placeholder{ color:#9aa3b8; }
input:focus,select:focus,textarea:focus{
  outline:none; border-color:var(--sr-brit); box-shadow:0 0 0 3px var(--sr-brit-tint);
}
textarea{ min-height:140px; resize:vertical; }

/* ---- buttons ---- */
button,.sr-btn{
  display:inline-block; padding:13px 22px; border:0; border-radius:12px;
  background:var(--sr-brit); color:#fff; font-weight:700; font-size:15px; cursor:pointer;
  font-family:inherit; box-shadow:0 8px 22px -10px rgba(33,58,135,.55);
  transition:background .2s, transform .15s, box-shadow .2s; text-decoration:none;
}
button:hover,.sr-btn:hover{ background:var(--sr-brit-deep); color:#fff; text-decoration:none; }
button:active,.sr-btn:active{ transform:translateY(1px); }
button:disabled{ opacity:.5; cursor:default; }
.sr-btn-gold{ background:var(--sr-gold-lit); color:#2A2205; box-shadow:0 8px 22px -10px rgba(203,161,53,.55); }
.sr-btn-gold:hover{ background:var(--sr-gold); color:#2A2205; }
.sr-btn-ghost{ background:transparent; color:var(--sr-brit); border:1px solid rgba(33,58,135,.28); box-shadow:none; }
.sr-btn-ghost:hover{ background:var(--sr-brit-tint); color:var(--sr-brit); }
.sr-btn-full{ width:100%; text-align:center; }

/* ---- light card ---- */
.sr-card{ background:var(--sr-surface); border:1px solid var(--sr-line); border-radius:16px;
  padding:22px; box-shadow:0 1px 2px rgba(20,32,48,.04),0 18px 38px -30px rgba(20,32,48,.22); }
.sr-ok{ background:var(--sr-brit-tint); border:1px solid rgba(60,122,80,.4); color:var(--sr-ink);
  border-radius:12px; padding:14px 16px; }