:root{

  --bg:#eef2f7; --surface:#fff; --line:#e1e7ef; --line2:#c9d3e0;
  --text:#16202c; --muted:#566270; --hint:#8a97a8;
  --brand:#1b2a52; --brand-l:#eaedf5;
  --accent:#d6006c; --accent-l:#fbe4ef;
  --good:#1f8f5f; --good-l:#e3f3ec; --mid:#c2851a; --mid-l:#faf0db;
  --red:#bb2d2d; --red-l:#fbeaea; --gray-l:#eef1f5;
  --best:#176dcc; --best-l:#e8f1ff;
  --overlay:rgba(16,28,45,.55); --modal-bg:#f8fafc; --row-alt:#f4f6f9;
  --good-d:#15623f;
  --suumo-gray:#f6f6f6;

  --line-strong:#9fb0c4;
  --accent-d:#b8005d;
  --brand-d:#111c38;
  --surface-alt:#f6f8fb;
  --mid-d:#8a5e10;

  --map-go:#1f8f5f;
  --map-mid:#d79a2a;
  --map-out:#9aa6b4;
  --map-unknown:#c9d3e0;
  --map-dot-stroke:#5a6b7f;
  --chart-1:var(--brand);
  --chart-2:#6b7fae;
  --chart-2-weak:#d3dcf2;
  --chart-you:var(--accent);
  --chart-shade:var(--accent-l);
  --chart-grid:var(--line);
  --chart-axis:var(--hint);
  --chart-off:var(--line2);
  --chart-seq-rgb:27,42,82;

  --role-go:var(--accent);          --role-go-hover:var(--accent-d);  --role-go-weak:var(--accent-l);
  --role-read:var(--brand);         --role-read-hover:var(--brand-d); --role-read-weak:var(--brand-l);
  --role-senpai:var(--good);        --role-senpai-hover:var(--good-d);--role-senpai-weak:var(--good-l);
  --role-danger:var(--red);                                           --role-danger-weak:var(--red-l);
  --role-neutral-line:var(--line-strong);

  --r-xs:4px;
  --r-sm:6px;
  --r-md:8px;
  --r-lg:12px;
  --r-xl:16px;
  --r-full:999px;

  --fs-xs:11px;
  --fs-sm:12px;
  --fs-md:13px;
  --fs-base:14px;
  --fs-lg:16px;
  --fs-xl:20px;
  --fs-2xl:26px;
  --lh-tight:1.35;
  --lh-base:1.6;

  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:24px; --sp-6:32px;

  --sh-1:0 1px 2px rgba(20,30,50,.08);
  --sh-2:0 2px 8px rgba(20,30,50,.12);
  --sh-3:0 8px 24px rgba(20,30,50,.16);
  --sh-4:0 20px 60px rgba(20,30,50,.24);
  --sh-up:0 -3px 16px rgba(20,30,50,.12);
  --sh-left:-6px 0 18px rgba(20,30,50,.16);

  --z-map:1;
  --z-map-overlay:640;
  --z-detail:650;
  --z-hovercard:800;
  --z-handoff:1000;
  --z-dropdown:1200;
  --z-drawer:1500;
  --z-popover:3000;
  --z-toast:4000;
  --z-fly:10000;

  --focus-color:var(--accent);
  --focus-width:2px;
  --focus-offset:2px;
  --tap-min:44px;
}
