/* 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 */
  --bg:#ffffff;        /* main background */
  --bg2:#f6f7f8;       /* secondary surface */
  --card:#f1f3f4;      /* chip / empty card background */
  --line:#e3e6e8;      /* dividers */
  --ink:#121212;       /* primary text */
  --mute:#5f6368;      /* secondary text */
  --dim:#9aa0a6;       /* dim text, labels */
  --green:#00DC64;     /* the only accent: primary buttons, "ga" in the logo */
  --green-d:#00B853;   /* button hover/press, green text on white */
  --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;
}

.logo{font:800 22px var(--head);letter-spacing:-.03em;color:var(--ink);text-decoration:none}
.logo b{color:var(--green);font-weight:800}
.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:#fff;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}