/* TickelPickel - Region Color Palette */

:root {
    /* Pastel colors for regions */
    --region-0: #FFB3BA;  /* Light pink */
    --region-1: #BAFFC9;  /* Light green */
    --region-2: #BAE1FF;  /* Light blue */
    --region-3: #FFFFBA;  /* Light yellow */
    --region-4: #FFD8B8;  /* Light orange */
    --region-5: #E0BBE4;  /* Light purple */
    --region-6: #C4FAF8;  /* Light cyan */
    --region-7: #FFC8DD;  /* Light rose */
}

/* Region background colors */
.cell[data-region="0"] { background-color: var(--region-0); }
.cell[data-region="1"] { background-color: var(--region-1); }
.cell[data-region="2"] { background-color: var(--region-2); }
.cell[data-region="3"] { background-color: var(--region-3); }
.cell[data-region="4"] { background-color: var(--region-4); }
.cell[data-region="5"] { background-color: var(--region-5); }
.cell[data-region="6"] { background-color: var(--region-6); }
.cell[data-region="7"] { background-color: var(--region-7); }

/* Hover states with slightly darker shades */
.cell[data-region="0"]:hover { background-color: #ffa0a8; }
.cell[data-region="1"]:hover { background-color: #a8f0b7; }
.cell[data-region="2"]:hover { background-color: #a8d1f0; }
.cell[data-region="3"]:hover { background-color: #f0f0a8; }
.cell[data-region="4"]:hover { background-color: #f0c8a0; }
.cell[data-region="5"]:hover { background-color: #d0a8d8; }
.cell[data-region="6"]:hover { background-color: #b0f0e8; }
.cell[data-region="7"]:hover { background-color: #f0b8c8; }

/* Active/pressed states */
.cell[data-region="0"]:active { background-color: #f08090; }
.cell[data-region="1"]:active { background-color: #90e0a0; }
.cell[data-region="2"]:active { background-color: #90c0e0; }
.cell[data-region="3"]:active { background-color: #e0e090; }
.cell[data-region="4"]:active { background-color: #e0b090; }
.cell[data-region="5"]:active { background-color: #c090c8; }
.cell[data-region="6"]:active { background-color: #a0e0d8; }
.cell[data-region="7"]:active { background-color: #e0a0b8; }