:root {
    --base: white;
    --contrast: black;

    --fg: #333;
    --link: #4dabf7;
	--link-hover: #82cfff;
    --h1: var(--fg);
    --bg-gradient: linear-gradient(90deg, #88FFFF 0%, #FF88FF 100%);
    --container-bg: rgba(255, 255, 255, 0.95);
    --border: #ddd;
    --input-bg: #f8f8f8;
    --btn-bg: linear-gradient(45deg, #667eea, #764ba2);
    --tier-bg: rgba(255, 255, 255, 0.9);
    --item-title-bg: rgba(255, 255, 255, 0.8);
    --delete-bg: #ff4757;
    --delete-hover: #ff3742;
    --error: #ff4757;
    --selected: #667eea;
    --selected-bg: rgba(102, 126, 234, 0.2);

    --tier-s-hue: 280;
    --tier-a-hue: 120;
    --tier-b-hue: 50;
    --tier-c-hue: 30;
    --tier-d-hue: 0;

    /*Pattern background triangles*/
	--c1: #F1F1F1; /* color top */
	--c2: #E2E2E2; /* color right   */
	--c3: #E7E7E7; /* color left  */
}