/* Tokens medidos em docs/01-design-tokens.md. Sem gradientes, sem dark mode.
   --gray: cinza decorativo (bordas, icones). --gray-text: texto secundario, 5,0:1 sobre o card.
   Medalhas: ouro leva numero --ink (11,6:1); prata e bronze levam branco (4,5:1 e 5,1:1). */
:root {
  --ink: #202124; --gray: #909090; --gray-text: #6f6f6f; --border: #e4e4e4; --surface: #f8f7f5; --card: #ffffff;
  --yellow: #f8d481; --yellow-hover: #f1d07c; --yellow-highlight: #fae3ac; --yellow-flash: #fdf1d5;
  --blue: #2e6ef5; --indigo: #4357ad; --silver: #767676; --bronze: #8f6544; --green-online: #009e5d; --green-staff: #0b7a4b; --red-today: #e74c3c;
  --r-sm: 4px; --r-md: 10px; --r-lg: 15px; --r-pill: 25px;
  --shadow-ui: 0 1px 2px rgba(60,64,67,.32), 0 2px 6px rgba(60,64,67,.15), 0 1px 8px rgba(0,0,0,.1);
  --shadow-card-hover: 0 1px 2px rgba(60,64,67,.302), 0 1px 3px 1px rgba(60,64,67,.149);
  --shadow-pinned: 0 2px 2px rgba(248,212,129,.32), 0 2px 6px rgba(248,212,129,.32), 0 1px 8px rgba(248,212,129,.2);
  --shadow-header: 0 1px 2px rgba(0,0,0,.4);
  --font: Roboto, Helvetica, Arial, sans-serif;
  --container: 1085px; --main: 770px; --col-gap: 42px; --side: 273px;
  --header-h: 112px; --header-compact-h: 64px; --content-top: 32px;
}