/* Ryuga brand tokens (source: design/BRAND.md, extracted from the approved design/prototype.html).
   Every web page shares this file. Change tokens here, not page by page. */
@import url('https://fonts.googleapis.com/css2?family=Sora:wght@500;600;700;800&family=Manrope:wght@400;500;600;700&display=swap');
@font-face{font-family:'Anton';src:url('design/fonts/Anton-Regular.ttf') format('truetype');font-display:swap}

:root{
  /* color: dark is the default and only theme (Hieu 15/10, values measured from OOC screenshots) */
  color-scheme:dark;
  --bg:#121212;        /* main background */
  --bg2:#1e1e1e;       /* secondary surface: panels, menus, sheets */
  --card:#272727;      /* chip / card / input background */
  --line:#3a3a3a;      /* dividers, borders */
  --ink:#ececec;       /* primary text */
  --mute:#9a9a9a;      /* secondary text */
  --dim:#8f8f8f;       /* dim text, labels */
  --on-green:#121212;  /* text on green buttons (AA on #00DC64) */
  --green:#00DC64;     /* the only accent: primary buttons, "ga" in the logo */
  --green-d:#00B853;   /* button hover/press, green text */
  --sys:#0a7cff;       /* secondary: system windows, credits */
  /* type */
  --head:'Sora',system-ui,sans-serif;
  --body:'Manrope',system-ui,sans-serif;
  --logo-title:'Anton','Sora',sans-serif; /* story titles on covers/hero only */
  /* radii */
  --r-chip:999px; --r-btn:14px; --r-card:14px; --r-panel:16px; --r-tag:6px;
  /* spacing (4px grid) */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px; --s7:48px;
}
:root[data-theme="light"]{
  /* light palette (toggle, Hieu 16/10) = the pre-dark values from 0b522ae9^ */
  color-scheme:light;
  --bg:#ffffff; --bg2:#f6f7f8; --card:#f1f3f4; --line:#e3e6e8; --ink:#121212; --mute:#5f6368; --dim:#5f6368; --on-green:#121212;
  /* AA 4.5:1 on #fff/#f1f3f4 (M2 16/10): green as TEXT goes dark; hover fills stay bright under dark text */
  --green-d:#006E32; --green-t:#006E32; /* #006E32: 5.27:1 on the 16% green tint (.pf-ben i), 6.41 on #fff */
}
:root[data-theme="light"] :is(.btn:hover,.wt-plus:hover,.pk:hover .tp,.pl-go:hover .pl-btn,.wf-rv-go:hover){background:#00C85A}
:root[data-theme="light"] :is(.logo b,b i,.mc-role,.ooc-tags a:not(.ooc-scn),.ooc-hash span){color:var(--green-t)}

.logo{font:800 22px var(--head);letter-spacing:-.03em;color:var(--ink);text-decoration:none}
.logo b{color:var(--green);font-weight:800}
.logo{display:inline-flex;align-items:center;gap:10px}
.logo img{width:32px;height:32px;border-radius:8px;display:block;box-shadow:0 0 0 1px var(--line)}
.chip{display:inline-flex;align-items:center;padding:7px 13px;border-radius:var(--r-chip);background:var(--card);color:var(--mute);font:600 13px var(--body);white-space:nowrap;border:0;cursor:pointer}
.chip.on{background:var(--ink);color:var(--bg)}
.btn{display:inline-flex;justify-content:center;align-items:center;gap:8px;min-height:44px;padding:13px 22px;border-radius:var(--r-btn);background:var(--green);color:var(--on-green);font:700 16px var(--head);text-decoration:none;border:0;cursor:pointer}
.btn:hover{background:var(--green-d)}
.btn.ghost{background:var(--card);color:var(--ink)}
.tag{font:700 10px var(--body);letter-spacing:.04em;text-transform:uppercase;padding:3px 7px;border-radius:var(--r-tag);background:rgba(0,0,0,.55);color:#fff}