:root {
  --ink-900: #0a0a0a;
  --ink-800: #151515;
  --ink-700: #2b2b2b;
  --ink-500: #5c5c5c;
  --ink-400: #8a8a8a;
  --ink-300: #c9c7c2;
  --paper:   #f4f2ed;
  --paper-2: #ebe8e1;
  --card:    #ffffff;
  --white:   #ffffff;

  --pastel-pink:   #f0c7d3;
  --pastel-green:  #c8e0c2;
  --pastel-blue:   #c2d4ea;
  --pastel-yellow: #ece1ad;

  --bronze: #8a5a35;
  --sepia:  #6b4a30;

  --text-primary:   var(--ink-900);
  --text-secondary: var(--ink-500);
  --text-muted:     var(--ink-400);
  --text-on-dark:   #f4f2ed;
  --text-on-dark-muted: #a8a6a0;

  --surface-page:   var(--paper);
  --surface-card:   var(--card);
  --surface-dark:   var(--ink-900);
  --surface-sunken: var(--paper-2);

  --border-hairline: var(--ink-300);
  --border-on-dark:  rgba(255,255,255,0.16);

  --accent:        var(--ink-900);
  --accent-on:     var(--paper);

  --rank-up:    #2f7d4f;
  --rank-down:  #b23a3a;
  --rank-flat:  var(--ink-400);
  --rank-gold:   #c8a24a;
  --rank-silver: #9ca0a6;
  --rank-bronze: #b07a45;
}