/* Cricket Auction design tokens. See DESIGN.md for how they are meant to be used. */
:root {
  color-scheme: dark;

  /* The pixel art: the ground and the auction room. Matches public/shared/palette.js. */
  --c-outside: #1f5a2e;
  --c-outside-2: #1c5329;
  --c-grass: #4fa64f;
  --c-grass-2: #459a47;
  --c-pitch: #dcbf7f;
  --c-white: #ffffff;
  --c-gold: #f2c14e;
  --c-wall: #173a27;
  --c-wall-dark: #122e1f;
  --c-floor: #b89a5f;
  --c-floor-dark: #a98b52;
  --c-wood: #7a4a25;
  --c-wood-dark: #5f3819;
  --c-steel: #aab2b8;

  /* The scoreboard */
  --c-board: #20241f;
  --c-board-2: #1b1f1a;
  --c-panel: #2d332c;
  --c-black: #11140f;
  --c-paper: #f7f3e4; /* the white paint */
  --c-paper-2: #ece4cf;
  --c-paper-3: #d9cfb4;
  --c-ink: #11181c;
  --c-led-2: #1f2a30;
  --c-led-line: #3a484f;

  /* Signals: colour only ever means something */
  --c-red: #d8342b;
  --c-red-deep: #a92720;
  --c-mint: #7ee2a8;
  --c-blue: #5aa9ff;

  /* Type */
  --font-display: 'Oswald', 'Arial Narrow', sans-serif;
  --font-label: 'Oswald', 'Arial Narrow', sans-serif;
  --font-body: 'IBM Plex Sans', system-ui, sans-serif;
  --font-micro: 'IBM Plex Sans', system-ui, sans-serif;
  --t-micro: 12px;
  --t-body: 15px;
  --t-xl: 30px;
  --t-2xl: 44px;
  --t-3xl: 64px;
  --t-hero: 96px;

  --s1: 4px;
  --s2: 8px;
  --s3: 12px;
  --s4: 16px;
  --s5: 24px;
  --s6: 32px;

  --r: 3px;
  --r-small: 2px;
  --tick: cubic-bezier(0.2, 0.7, 0.3, 1);

  /* Standing on the boards */
  --surface: var(--c-board);
  --surface-2: var(--c-black);
  --fg: var(--c-paper);
  --fg-2: #d7d8cb;
  --muted: #b3b6a6;
  --line: #454c43;
  --accent: var(--c-paper);
  --good: var(--c-mint);
  --bad: #ff9a8f;
  --role-bat: #f2d27e;
  --role-wk: #9fd3ff;
  --role-ar: #c7a6ff;
  --role-fast: #ff9a8f;
  --role-spin: #7ee2a8;
  --overseas: #9fd3ff;
}

/* A panel on the board. */
.card, .toast {
  --surface: var(--c-panel);
  --surface-2: var(--c-black);
  background: var(--surface);
  color: var(--fg);
}

/* The black number boards: anything changing right now. */
.led, .lot, .topbar, .scoreboard, .stadium-overlay, .season-hero, .next-strip, .paddle-area {
  --surface: var(--c-black);
  --surface-2: var(--c-panel);
  background: var(--surface);
  color: var(--fg);
}

/* White paint: whatever is picked or highlighted. */
.team-option[aria-checked='true'], .mode-option[aria-checked='true'], .segment[aria-checked='true'],
.franchise.is-mine, .team-row.is-mine, .tab[aria-selected='true'], .phone-tab[aria-selected='true'], .btn-primary, .lot-rate.is-overall {
  --surface: var(--c-paper);
  --surface-2: var(--c-paper-2);
  --fg: var(--c-ink);
  --fg-2: #3b4039;
  --muted: #5e6258;
  --line: var(--c-paper-3);
  --accent: var(--c-ink);
  --good: #17693c;
  --bad: #b3261e;
  --role-bat: #7d5200;
  --role-wk: #1a5a94;
  --role-ar: #63389a;
  --role-fast: #ab2a1f;
  --role-spin: #17693c;
  --overseas: #1a5a94;
  background: var(--surface);
  color: var(--fg);
}