:root {
  color-scheme: dark;

  /* Brand */
  --primary_color: #FFCC00;
  --on_primary_color: #202020;
  --secondary_color: #D8232F;
  --secondary_text_color: #FF5F66;

  /* Surfaces (dark, base #202020) */
  --surface_color: #202020;
  --surface_container_color: #333333;
  --surface_container_low_color: #262626;
  --surface_container_lowest_color: #2a2a2a;
  --surface_inverse_color: #141414;

  /* Lines */
  --border_color: #363636;
  --border_subtle_color: #2c2c2c;
  --border_strong_color: #4a4a4a;

  /* Text */
  --text_primary_color: #f2f2f2;
  --text_secondary_color: #a6a6a6;
  --text_tertiary_color: #757575;

  /* Status */
  --success_color: #4ade80;
  --success_surface_color: #16301f;

  /* Layout frame */
  --content_max_width: 1200px;
  --content_gutter: 48px;
  --sidebar_width: 256px;
  /* The bottom bar in the mobile layout: a 52px button row plus its top border.
     Set here so the overlays that have to stop above it can do the arithmetic. */
  --mobile_nav_height: 53px;
  --stats_panel_width: 380px;

  /* Elevation */
  --shadow_soft: 0 10px 15px -3px rgba(0, 0, 0, 0.5);
  --shadow_strong: 0 20px 25px -5px rgba(0, 0, 0, 0.6), 0 8px 10px -6px rgba(0, 0, 0, 0.5);
}