html {
    /* Light Mode */
    --bg-color: #F9FAFB;
    --text-color-bttn: #0f192e;
    --grid-gap: 20px;

    /* Blue Shade Scale */
    --blue-50: #eff6ff;
    --blue-100: #dbeafe;
    --blue-200: #bfdbfe;
    --blue-300: #93c5fd;
    --blue-400: #60a5fa;
    --blue-500: #6798e6;
    --blue-600: #6993ec;
    --blue-700: #9cb6ff;
}

html.dark {
    --bg-color: #111827;
    --text-color-bttn: #d6eefa;
    --grid-gap: 20px;

    --blue-50: #33455c;
    --blue-100: #062752;
    --blue-200: #031c3b;
    --blue-300: #2a486b;
    --blue-400: #0c213b;
    --blue-500: #092b61;
    --blue-600: #03143a;
    --blue-700: #090c14;
 
    /* Shades invert slightly for dark mode visibility */
}
 
.button-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--grid-gap);
    max-width: 500px;
    margin: 8px auto;
}

.btn-base {
    padding: 16px 24px;
    border-radius: 8px;
    border: none;
    font-weight: 600;
    cursor: pointer;
    transition: transform 0.1s, background-color 0.2s;
    text-align: center;
}

/* Interaction Rules */

/* Only Hover: Changes color but doesn't react to click/press */
.only-hover:hover {
    background-color: var(--blue-700) !important;
    color: white;
}

.only-hover:active {
    transform: none !important;
}

/* Only Press: Visually sinks when held, but no hover effect */
.only-press:active {
    transform: scale(0.92);
}

.only-press:hover {
    background-color: inherit;
}

/* Only Click: We use a JS class for this toggle effect */
.clicked-state {
    border: 3px solid var(--blue-600);
    box-shadow: 0 0 10px var(--blue-300);
}

/* Specific Colors for the 8 buttons */
.btn-1 {
    background-color: var(--blue-50);
    color: var(--text-color-bttn);
    border-radius: 24px;
}

.btn-2 {
    background-color: var(--blue-100);
    color: var(--text-color-bttn);
}

.btn-3 {
    background-color: var(--blue-200);
    border-radius: 60px;
    color: var(--text-color-bttn);

}

.btn-4 {
    background-color: var(--blue-300);
    color: var(--text-color-bttn);

}

.btn-5 {
    background-color: var(--blue-400);
     color: var(--text-color-bttn);

}

.btn-6 {
    background-color: var(--blue-500);
    color: var(--text-color-bttn);
}

.btn-7 {
    background-color: var(--blue-600);
    color: var(--text-color-bttn);
}

.btn-8 {
    background-color: var(--blue-700);
    color: var(--text-color-bttn);
}