/* Design tokens. Every other stylesheet reads from here; do not hardcode colours, fonts or radii elsewhere. */
:root {
  color-scheme: dark;

  --bg: #0a0f1f;
  --bg-2: #0e1530;
  --panel: #151d3b;
  --panel-2: #1c2750;
  --panel-3: #243061;
  --line: #2b3769;
  --line-2: #3a487f;
  --text: #eef2ff;
  --text-dim: #9fabd6;
  --text-faint: #6f7cac;

  --red: #ee4b4b;
  --red-2: #c93030;
  --yellow: #ffd23f;
  --yellow-2: #e8b800;
  --blue: #5cc8ff;
  --green: #46d98b;
  --danger: #ff6b7d;

  --radius: 10px;
  --radius-lg: 16px;
  --radius-sm: 6px;
  --shadow: 0 8px 24px rgba(2, 5, 18, .45);
  --shadow-sm: 0 2px 8px rgba(2, 5, 18, .35);
  --ring: 0 0 0 3px rgba(92, 200, 255, .55);

  --gap: 16px;
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px;
  --ease: cubic-bezier(.2, .8, .2, 1);

  --font-display: 'Oxanium', system-ui, 'Segoe UI', sans-serif;
  --font-body: 'Work Sans', system-ui, 'Segoe UI', sans-serif;

  --header-h: 60px;

  /* Pokémon type colours (+ readable text colour on top of them) */
  --t-normal: #a8a77a;   --on-normal: #14141a;
  --t-fire: #ee8130;     --on-fire: #1a0f05;
  --t-water: #6390f0;    --on-water: #0a1330;
  --t-electric: #f7d02c; --on-electric: #1c1700;
  --t-grass: #7ac74c;    --on-grass: #0e1f05;
  --t-ice: #96d9d6;      --on-ice: #08201f;
  --t-fighting: #c22e28; --on-fighting: #ffffff;
  --t-poison: #a33ea1;   --on-poison: #ffffff;
  --t-ground: #e2bf65;   --on-ground: #241a00;
  --t-flying: #a98ff3;   --on-flying: #150a33;
  --t-psychic: #f95587;  --on-psychic: #2a0412;
  --t-bug: #a6b91a;      --on-bug: #1a1f00;
  --t-rock: #b6a136;     --on-rock: #1f1a00;
  --t-ghost: #735797;    --on-ghost: #ffffff;
  --t-dragon: #6f35fc;   --on-dragon: #ffffff;
  --t-dark: #705746;     --on-dark: #ffffff;
  --t-steel: #b7b7ce;    --on-steel: #14141f;
  --t-fairy: #d685ad;    --on-fairy: #2a0a1d;
  --t-stellar: #44b6a8;  --on-stellar: #04221e;
  --t-unknown: #68a090;  --on-unknown: #04221e;

  --hp-high: var(--green);
  --hp-mid: var(--yellow);
  --hp-low: var(--red);
}