/* Shared styling for the standalone legal pages served from public/:
   /privacy, /terms and /delete-account.

   These are plain static files copied verbatim into the web export — they are
   NOT part of the Expo app bundle, so they cannot use lib/theme.ts. The values
   below mirror the token module BY HAND. They track the two poles of the
   four-theme system rather than any single theme: light mirrors FRESH, dark
   mirrors NIGHT (the brand theme). If those two token sets change, change this
   too. Kept as one stylesheet rather than inlined per page so the three
   documents cannot drift apart visually.

   --brand and --link are deliberately SEPARATE. Fresh's accent is optic volt
   (#CBF23F): correct as a fill, illegible as text on white — which is exactly
   why the token module carries `accentInk` alongside `accent`. So the volt
   paints the dot and the note's edge, while links take the ink colour and are
   underlined. The underline is not decoration: on Fresh the link ink is
   near-black, so colour alone would not distinguish a link from body text. */

:root{
  /* Fresh */
  --bg:#F1F3EE; --ink:#0E1311; --sub:#68716D; --muted:#8E968A;
  --line:#E4E7E0; --tint:#FFFFFF; --brand:#CBF23F; --link:#0E1311;
}
@media (prefers-color-scheme: dark){
  /* Night */
  :root{ --bg:#0A0C10; --ink:#EDF1F7; --sub:#8B95A7; --muted:#5C6675;
         --line:rgba(255,255,255,0.07); --tint:#141922; --brand:#37E0A0; --link:#37E0A0; }
}
*{box-sizing:border-box}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font:16px/1.65 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,
    "Noto Sans TC","Noto Sans SC",sans-serif;
  -webkit-text-size-adjust:100%;
}
.wrap{max-width:720px;margin:0 auto;padding:40px 20px 72px}
header{border-bottom:1px solid var(--line);padding-bottom:24px;margin-bottom:32px}
.brand{display:inline-flex;align-items:center;gap:10px;text-decoration:none;color:inherit}
.dot{width:30px;height:30px;border-radius:999px;background:var(--brand);flex:0 0 auto}
.brand span{font-weight:800;font-size:18px;letter-spacing:-.01em}
h1{font-size:30px;line-height:1.2;letter-spacing:-.02em;margin:22px 0 8px}
h2{font-size:19px;letter-spacing:-.01em;margin:38px 0 10px;padding-top:4px}
h3{font-size:16px;margin:24px 0 8px;color:var(--sub)}
.dates{color:var(--sub);font-size:14px;margin:0}
/* Underlined, not colour-only: on Fresh the link ink is near-black. */
a{color:var(--link);text-decoration:underline}
.lead{font-size:17px;color:var(--sub)}
/* Wide content must scroll inside its own box — the page body never scrolls sideways. */
table{border-collapse:collapse;width:100%;margin:14px 0;font-size:15px;display:block;overflow-x:auto}
th,td{text-align:left;padding:10px 12px;border-bottom:1px solid var(--line);vertical-align:top}
th{font-weight:700;background:var(--tint);white-space:nowrap}
.note{background:var(--tint);border:1px solid var(--line);border-left:3px solid var(--brand);
      border-radius:8px;padding:14px 16px;margin:18px 0}
.note p{margin:0}
.note p + p{margin-top:10px}
ul{padding-left:20px}
ol{padding-left:22px}
footer{margin-top:56px;padding-top:22px;border-top:1px solid var(--line);
       color:var(--muted);font-size:14px}
footer a{color:var(--sub)}
code{background:var(--tint);padding:2px 6px;border-radius:5px;font-size:14px}
