ui/_theme.scss
// Shared look and feel for every Breakout UI panel.
// Each .razor.scss @imports this file, so all the colours and fonts live in one place.
// Change a value here and it updates across every screen.

// Fonts
$font-display: "Baloo 2", Poppins, sans-serif;   // headings, scores, and buttons
$font-body: Poppins, sans-serif;                 // labels and smaller text

// Core palette
$ink: #2B2440;         // dark colour for outlines, borders, shadows, and most text
$cream: #F6ECD4;       // warm background and panel fill
$sand: #E7DDC6;        // muted tan for avatars, tags, and empty life dots
$sand-deep: #b3a988;   // slightly darker tan for the empty-dot border
$white: #ffffff;

// Accent colours
$green: #46D07E;       // play buttons
$gold: #FFC93C;        // stars and the level chip
$gold-deep: #C9A227;   // the "best score" label
$red: #FF5D5D;         // badges and life dots
$blue: #4A9BFF;        // classic mode and the selected tab
$purple: #9B7BFF;      // arcade mode
$orange: #FF9E45;      // weekly mode
$highlight: #FFF3C4;   // your own leaderboard row and the score flash
$muted: #6A6280;       // secondary, less important text

// Damage flash effect
$damage-glow: #CD1919; // red glow around the screen edge when you lose a life
$damage-tint: #BE1414; // faint red wash over the whole screen at the same time