/*
  Design tokens. The setka.dev foundation (Inter, obsidian #121016, hairlines, one violet accent,
  slash eyebrows) with a second layer of personality: raised panels, real skins, a restrained hue per
  category, medal tints for the top three and muted green / red for rank movements.

  Dark is the default; light follows the same scale. The theme is set on <html data-theme> before
  first paint (theme-init.js). No web font is downloaded: Inter when installed, else the system UI font.
*/

:root {
  --font-sans: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-mono: ui-monospace, "SF Mono", "Cascadia Code", Menlo, Consolas, monospace;

  /* layout */
  --shell-max: 68rem;
  --gutter: 2rem;
  --measure: 36rem;
  --header-h: 4rem;
  --section-y: 4.75rem;

  /* type scale */
  --fs-body: 1.0625rem;   /* 17px */
  --fs-lede: 1.2rem;
  --fs-small: 0.9rem;
  --fs-xs: 0.8125rem;
  --fs-h1: clamp(2.6rem, 1.5rem + 4.2vw, 4.9rem);
  --fs-title: clamp(2.25rem, 1.6rem + 2.4vw, 3.5rem);
  --fs-h2: clamp(1.6rem, 1.25rem + 1.2vw, 2.25rem);
  --fs-h3: 1.125rem;

  /* shape & motion */
  --radius: 12px;
  --radius-sm: 8px;
  --radius-xs: 5px;
  --ease: 150ms ease;
  --ease-out: cubic-bezier(0.2, 0.7, 0.2, 1);
  --lift: translateY(-2px);

  /* dark (default) */
  color-scheme: dark;
  --bg: #121016;
  --bg-hover: #1b1821;
  --surface: #17141c;
  --surface-2: #1e1a25;
  --surface-3: #262130;
  --ink: #f6f5f9;
  --ink-hover: #dedce6;
  --body: #c7c4d3;
  --muted: #9e9aaf;
  --faint: #6f6a82;
  --rule: #2a2634;
  --rule-strong: #3b3547;
  --underline: #545065;
  --control: #66617a;     /* field underlines: 3.2:1 on --bg (WCAG 1.4.11) */
  --accent: #b06fe6;
  --accent-ink: #c99af0;  /* accent text on panels */
  --accent-soft: rgb(176 111 230 / 0.14);
  --accent-glow: rgb(176 111 230 / 0.32);
  --on-ink: #121016;
  --header-bg: rgb(18 16 22 / 0.86);
  --panel-highlight: inset 0 1px 0 rgb(255 255 255 / 0.035);
  --shadow-lift: 0 14px 34px -18px rgb(0 0 0 / 0.75);

  /* movement */
  --up: #73c793;
  --up-soft: rgb(115 199 147 / 0.13);
  --down: #e88389;
  --down-soft: rgb(232 131 137 / 0.13);

  /* medals (rank numerals 1–3, podium) */
  --gold: #e2c06a;
  --silver: #bdbacb;
  --bronze: #d29468;

  /* category hues: desaturated, one per category, used only in its chips, bars and charts */
  --cat-global: #b06fe6;
  --cat-pvp: #e8857a;
  --cat-pve: #e09c5c;
  --cat-advancements: #d4bb62;
  --cat-farming: #8fc47f;
  --cat-exploration: #57c2b0;
  --cat-mining: #71b3e3;
  --cat-building: #9aa2f4;
  --cat-survival: #e386b8;
  --cat-other-1: #c8a2e8;
  --cat-other-2: #8fd1d6;
  --cat-other-3: #e3b58f;

  /* compare: the two players (their own colours, never a category's) */
  --vs-a: var(--accent);
  --vs-b: #e9e6f2;

  /* skins */
  --head-empty: #2a2533;
  --head-empty-ink: #3a3446;
  --face-ring: rgb(255 255 255 / 0.07);
  --cube-shadow: rgb(0 0 0 / 0.45);
}

:root[data-theme="light"] {
  color-scheme: light;
  --bg: #ffffff;
  --bg-hover: #f6f5f9;
  --surface: #faf9fc;
  --surface-2: #f3f1f7;
  --surface-3: #eae7f0;
  --ink: #16131f;
  --ink-hover: #3e3a4d;
  --body: #3e3a4d;
  --muted: #6c6880;
  --faint: #9a96aa;
  --rule: #e2e0e9;
  --rule-strong: #cfccd9;
  --underline: #c7c4d3;
  --control: #8e8a9e;     /* 3.3:1 on white */
  --accent: #8438c6;
  --accent-ink: #7a2fbb;
  --accent-soft: rgb(132 56 198 / 0.09);
  --accent-glow: rgb(132 56 198 / 0.22);
  --on-ink: #ffffff;
  --header-bg: rgb(255 255 255 / 0.86);
  --panel-highlight: inset 0 1px 0 rgb(255 255 255 / 0.9);
  --shadow-lift: 0 16px 30px -20px rgb(40 20 70 / 0.35);

  --up: #1f8a4c;
  --up-soft: rgb(31 138 76 / 0.1);
  --down: #c23c48;
  --down-soft: rgb(194 60 72 / 0.09);

  --gold: #a37d12;
  --silver: #6d6980;
  --bronze: #a35a26;

  --cat-global: #8438c6;
  --cat-pvp: #c1473c;
  --cat-pve: #b0601b;
  --cat-advancements: #8f7412;
  --cat-farming: #3f8436;
  --cat-exploration: #18806f;
  --cat-mining: #2a6fa3;
  --cat-building: #4a55c4;
  --cat-survival: #b03f7c;
  --cat-other-1: #7d4fb0;
  --cat-other-2: #1f7f86;
  --cat-other-3: #a0602e;

  --vs-a: var(--accent);
  --vs-b: #2c2838;

  --head-empty: #e9e6ef;
  --head-empty-ink: #d6d2df;
  --face-ring: rgb(22 19 31 / 0.1);
  --cube-shadow: rgb(40 20 70 / 0.28);
}

@media (max-width: 760px) {
  :root {
    --gutter: 1rem;
    --section-y: 3.5rem;
    --radius: 10px;
  }
}