/* toss.gg design tokens. Every value is measured from dpm.lol (saved pages in design/reference/dpm, 2026-10-28).
   Latin and numbers use DPM's Plus Jakarta Sans; Hangul falls back to Pretendard because Plus Jakarta has no Hangul. */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@200..800&display=swap');
@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.min.css');

:root {
  color-scheme: dark;
  --font: 'Plus Jakarta Sans', 'Pretendard Variable', Pretendard, system-ui, sans-serif;
  --ls: 0.15px;

  /* page */
  --page: #131619;
  --header: #0d0f10;
  --panel-solid: #0d0f10;
  --glow-band: linear-gradient(rgba(166, 176, 242, 0.05), rgba(166, 176, 242, 0.008) 88%); /* the giant footer word */
  --glow-top: radial-gradient(85% 100% at 50% 0%, #3d3560 0%, rgba(61, 53, 95, 0.7) 18%, rgba(62, 53, 95, 0.45) 36%, rgba(60, 52, 96, 0.25) 54%, rgba(64, 55, 100, 0.11) 72%, rgba(64, 64, 96, 0.03) 88%, transparent 100%);

  /* surfaces, all translucent lavender over the page */
  --card: rgba(230, 204, 255, 0.04);
  --card-line: rgba(255, 255, 255, 0.05);
  --card-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);
  --podium: rgba(216, 196, 255, 0.05);
  --row: rgba(217, 204, 255, 0.08);
  --line-10: rgba(255, 255, 255, 0.1);
  --line-8: rgba(255, 255, 255, 0.08);
  --line-6: rgba(255, 255, 255, 0.06);
  --line-4: rgba(255, 255, 255, 0.04);
  --nav-tint: rgba(179, 179, 230, 0.04);
  --nav-line: rgba(245, 245, 255, 0.1);
  --seg-on: rgba(165, 173, 239, 0.12);
  --seg-on-line: rgba(168, 174, 243, 0.16);
  --chip: rgba(226, 206, 255, 0.1);
  --sunken: rgba(0, 0, 0, 0.1);
  --slot: rgba(245, 245, 255, 0.1);
  --tile: #242832;
  --tile-70: rgba(36, 40, 50, 0.7);
  --control: #1a1d21;
  --icon-ring: #363a3d;
  --pill: rgba(26, 28, 33, 0.7);

  /* ink */
  --white: #ffffff;
  --ink-hi: #f9fafd;
  --ink: #e8e8e8;
  --ink-2: #cdcecf;
  --ink-3: #9b9c9e;
  --ink-nav: rgba(248, 250, 253, 0.6);

  /* brand: the logo mark only, one loud colour no other site in the space uses */
  --brand: #b6ff3b;

  /* accents */
  --lavender: #a6b0f2;
  --lilac: #deccfb;
  --cyan: #82dbf7;
  --sky: #91c5ff;
  --gold: #ffe8a3;
  --gold-2: #ffdc75;
  --amber: #ffd47d;
  --rank-1: #e2b42b;
  --rank-2: #cdcecf;
  --rank-3: #e26f20;
  --purple: #bd9af8;
  --green: #4ac97e;
  --red: #f03a38;
  --coral: #f7665e;
  --victory: #7989ec;

  /* win and loss */
  --win-tint: rgba(48, 68, 199, 0.25);
  --loss-tint: rgba(245, 100, 95, 0.2);
  --none-tint: rgba(255, 255, 255, 0.05);
  --sheen: linear-gradient(to right bottom, rgba(255, 255, 255, 0.04) 0%, transparent 50%);
  --win-badge: rgba(140, 197, 255, 0.12);
  --loss-badge: rgba(247, 99, 90, 0.12);
  --w-chip: rgba(76, 99, 229, 0.3);
  --l-chip: rgba(248, 103, 93, 0.3);
  --mvp-chip: rgba(255, 214, 123, 0.12);

  /* win-rate chips on the leaderboard (DPM, unrounded win rate): 60+ gold, 56+ purple, 52.5+ cyan, below that grey */
  --wr-gold: rgba(255, 220, 117, 0.6);
  --wr-purple: rgba(189, 154, 248, 0.6);
  --wr-cyan: rgba(130, 218, 247, 0.6);
  --wr-grey: rgba(155, 157, 158, 0.6);
  --dmg-bar: rgba(200, 243, 180, 0.6);

  /* KDA text on the leaderboard and podium (DPM getKdaColor): over 4.5 gold, over 2.5 lilac, over 1.5 cyan, else grey */
  --kda-gold: #ffe8a3;
  --kda-lilac: #deccfb;
  --kda-cyan: #a1e4f9;
  --kda-grey: #9b9c9e;

  /* badge colours DPM uses for regions; free for our own badges */
  --badge-green: #4d6a3f;
  --badge-blue: #4d62e5;
  --badge-purple: #7c35f1;

  --r-3: 3px;
  --r-4: 4px;
  --r-6: 6px;
  --r-8: 8px;
  --r-full: 999px;

  --w-page: 1104px;
  --w-aside: 272px;
  --w-main: 816px;
}