:root {
    --theme-1-main-bg: hsl(222, 26%, 31%);
    --theme-1-toggle-bg: hsl(223, 31%, 20%);
    --theme-1-toggle-btn: hsl(6, 63%, 50%);
    --theme-1-text-clr: hsl(0, 0%, 100%);
    --theme-1-screen-bg: hsl(224, 36%, 15%);
    --theme-1-keypad-bg: hsl(223, 31%, 20%);
    --theme-1-key-bg: hsl(30, 25%, 89%);
    --theme-1-key-shadow: hsl(224, 28%, 35%);
    --theme-1-key-clr: hsl(221, 14%, 31%);
    --theme-1-equal-btn: hsl(6, 63%, 50%);
    --theme-1-equal-shadow: hsl(6, 70%, 34%);
    --theme-1-equal-text-clr: hsl(0, 0%, 100%);
    --theme-1-text-btn-clr: hsl(0, 0%, 100%);
    --theme-1-text-btn-bg: hsl(225, 21%, 49%);
    --theme-1-text-btn-shadow: hsl(224, 28%, 35%);

    --theme-2-main-bg: hsl(0, 0%, 90%);
    --theme-2-toggle-bg: hsl(0, 5%, 81%);
    --theme-2-toggle-btn: hsl(25, 98%, 40%);
    --theme-2-text-clr: hsl(60, 10%, 19%);
    --theme-2-screen-bg: hsl(0, 0%, 93%);
    --theme-2-keypad-bg: hsl(0, 5%, 81%);
    --theme-2-key-bg: hsl(45, 7%, 89%);
    --theme-2-key-shadow: hsl(185, 58%, 25%);
    --theme-2-key-clr: hsl(60, 10%, 19%);
    --theme-2-equal-btn: hsl(25, 98%, 40%);
    --theme-2-equal-shadow: hsl(25, 99%, 27%);
    --theme-2-equal-text-clr: hsl(0, 0%, 100%);
    --theme-2-text-btn-clr: hsl(0, 0%, 100%);
    --theme-2-text-btn-bg: hsl(185, 42%, 37%);
    --theme-2-text-btn-shadow: hsl(185, 58%, 25%);

    --theme-3-main-bg: hsl(268, 75%, 9%);
    --theme-3-toggle-bg: hsl(268, 71%, 12%);
    --theme-3-toggle-btn: hsl(176, 100%, 44%);
    --theme-3-text-clr: hsl(52, 100%, 62%);
    --theme-3-screen-bg: hsl(268, 71%, 12%);
    --theme-3-keypad-bg: hsl(268, 71%, 12%);
    --theme-3-key-bg: hsl(268, 47%, 21%);
    --theme-3-key-shadow: hsl(290, 70%, 36%);
    --theme-3-key-clr: hsl(52, 100%, 62%);
    --theme-3-equal-btn: hsl(176, 100%, 44%);
    --theme-3-equal-shadow: hsl(177, 92%, 70%);
    --theme-3-equal-text-clr: hsl(198, 20%, 13%);
    --theme-3-text-btn-clr: hsl(0, 0%, 100%);
    --theme-3-text-btn-bg: hsl(281, 89%, 26%);
    --theme-3-text-shadow: hsl(285, 91%, 52%);
}

[data-theme="theme-1"] {
    --main-bg: var(--theme-1-main-bg);
    --toggle-bg: var(--theme-1-toggle-bg);
    --toggle-btn: var(--theme-1-toggle-btn);
    --text-clr: var(--theme-1-text-clr);
    --screen-bg: var(--theme-1-screen-bg);
    --keypad-bg: var(--theme-1-keypad-bg);
    --key-bg: var(--theme-1-key-bg);
    --key-shadow: var(--theme-1-key-shadow);
    --key-clr: var(--theme-1-key-clr);
    --equal-btn: var(--theme-1-equal-btn);
    --equal-btn-shadow: var(--theme-1-equal-shadow);
    --equal-text-clr: var(--theme-1-equal-text-clr);
    --text-btn-clr: var(--theme-1-text-btn-clr);
    --text-btn-bg: var(--theme-1-text-btn-bg);
    --text-btn-shadow: var(--theme-1-text-btn-shadow);
}

[data-theme="theme-2"] {
    --main-bg: var(--theme-2-main-bg);
    --toggle-bg: var(--theme-2-toggle-bg);
    --toggle-btn: var(--theme-2-toggle-btn);
    --text-clr: var(--theme-2-text-clr);
    --screen-bg: var(--theme-2-screen-bg);
    --keypad-bg: var(--theme-2-keypad-bg);
    --key-bg: var(--theme-2-key-bg);
    --key-shadow: var(--theme-2-key-shadow);
    --key-clr: var(--theme-2-key-clr);
    --equal-btn: var(--theme-2-equal-btn);
    --equal-btn-shadow: var(--theme-2-equal-shadow);
    --equal-text-clr: var(--theme-2-equal-text-clr);
    --text-btn-clr: var(--theme-2-text-btn-clr);
    --text-btn-bg: var(--theme-2-text-btn-bg);
    --text-btn-shadow: var(--theme-2-text-btn-shadow);
}

[data-theme="theme-3"] {
    --main-bg: var(--theme-3-main-bg);
    --toggle-bg: var(--theme-3-toggle-bg);
    --toggle-btn: var(--theme-3-toggle-btn);
    --text-clr: var(--theme-3-text-clr);
    --screen-bg: var(--theme-3-screen-bg);
    --keypad-bg: var(--theme-3-keypad-bg);
    --key-bg: var(--theme-3-key-bg);
    --key-shadow: var(--theme-3-key-shadow);
    --key-clr: var(--theme-3-key-clr);
    --equal-btn: var(--theme-3-equal-btn);
    --equal-btn-shadow: var(--theme-3-equal-shadow);
    --equal-text-clr: var(--theme-3-equal-text-clr);
    --text-btn-clr: var(--theme-3-text-btn-clr);
    --text-btn-bg: var(--theme-3-text-btn-bg);
    --text-btn-shadow: var(--theme-3-text-shadow);
}

*,
*::after,
*::before {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::after,
    *::before {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

input[type="radio"] {
    cursor: pointer;
    border: none;
}

button {
    cursor: pointer;
    font: inherit;
    border: none;
    background: transparent;
}

h1,
h2,
h3 {
    line-height: 1.1;
}

body {
    font-family: "League Spartan", sans-serif;
    line-height: 1.5;
    font-weight: 700;
    background-color: var(--main-bg);
    transition: background-color 350ms ease, color 350ms ease;
}

.app-wrapper {
    margin-inline: auto;
    width: min(400px, 100% - 4rem);
    min-height: 100dvh;
    display: grid;
    gap: 1.75rem;
    grid-template-rows: auto auto 1fr;
    padding-block: 3rem;
}

.header {
    display: flex;
    align-items: end;
    justify-content: space-between;
}

.theme-toggle {
    display: flex;
    gap: 1rem;
    align-items: end;
}

.theme-toggle p {
    text-transform: uppercase;
    font-size: 0.75rem;
}

h1,
.theme-toggle p,
.theme-toggle label,
.screen {
    color: var(--text-clr);
}

.toggle-container {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.toggle-container .labels {
    display: flex;
    justify-content: space-between;
}

.toggle-container label {
    cursor: pointer;
    font-size: 0.825rem;
}

.toggle-container input {
    opacity: 0;
}

.slider {
    width: 54px;
    height: 24px;
    border-radius: 20px;
    background-color: var(--toggle-bg);
    display: flex;
    justify-content: space-between;
    position: relative;
}

.slider::after {
    content: '';
    position: absolute;
    background-color: var(--toggle-btn);
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.25);
    top: calc(50% - 7px);
    left: 3px;
    height: 14px;
    aspect-ratio: 1;
    border-radius: 50%;
    transition: transform 350ms ease;
}
.slider:has(#theme-2:checked)::after {
    transform: translateX(18px);
}
.slider:has(#theme-3:checked)::after {
    transform: translateX(36px);
}

.screen {
    border-radius: 0.5rem;
    height: 7rem;
    font-size: 2rem;
    text-align: right;
    overflow: hidden;
    background-color: var(--screen-bg);

    /* adjust later */
    display: flex;
    align-items: center;
    justify-content: end;
    padding: 2rem;
    /* reduce text size as number increases */
}

.keypad {
    border-radius: 0.5rem;
    background-color: var(--keypad-bg);
    padding: 1.75rem;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
}

button {
    font-size: 2rem;
    border-radius: 0.5rem;
    background-color: var(--key-bg);
    box-shadow: 0 4px 0 var(--key-shadow);
    color: var(--key-clr);
    transition: filter 350ms ease, scale 350ms ease;
}
button:hover {
    filter: brightness(150%);
}
/* button click */
button:active {
    scale: 0.95;
}

button.span-2 {
    grid-column: span 2;
}

#equal-btn {
    background-color: var(--equal-btn);
    color: var(--equal-text-clr);
    box-shadow: 0 4px 0 var(--equal-btn-shadow);
}

#reset-btn,
#del-btn {
    text-transform: uppercase;
    color: var(--text-btn-clr);
    background-color: var(--text-btn-bg);
}