:root {
    --bg-color: hsla(270, 25%, 98%, 1); /* seasalt */
    --text-color: hsla(206, 16%, 40%, 1); /* paynes-gray */
    --color-primary: hsla(206, 86%, 49%, 1); /* bleu-de-france */
    --outline-color: hsla(331, 96%, 69%, 1); /* hot-pink */
    --button-bg: linear-gradient(
        to right,
        #fbfafc,
        #59c3d1
    ); /* seasalt → robin-egg-blue */
    --button-bg-box-shadow-color: rgba(89, 195, 209, 0.5); /* robin-egg-blue */
    --button-bg-primary: linear-gradient(
        to right,
        hsla(187, 57%, 58%, 1),
        /* robin-egg-blue */ hsla(206, 86%, 49%, 1) /* bleu-de-france */
    );
    --button-bg-primary-box-shadow-color: hsla(206, 86%, 49%, 0.5);
    --button-bg-secondary: linear-gradient(
        to right,
        hsla(331, 96%, 85%, 1),
        /* light-pink */ hsla(331, 96%, 69%, 1) /* hot-pink */
    );
    --button-bg-secondary-box-shadow-color: hsla(331, 96%, 69%, 0.5);
    --button-action-shadow-color: hsla(206, 15%, 60%, 0.12);
    --underline-color: hsla(206, 16%, 40%, 0.65);
    --secondary-text-color: hsla(206, 16%, 40%, 0.6);
    --send-icon-hover-color: hsla(206, 86%, 49%, 1);
    --send-spinner-icon-color: hsla(187, 57%, 58%, 0.7);
    --copy-icon-color: hsla(331, 96%, 69%, 1);
    --copy-icon-bg-color: hsla(270, 25%, 98%, 1);
    --copy-icon-shadow-color: hsla(206, 15%, 60%, 0.12);
    --focus-outline-color: hsla(331, 96%, 69%, 0.5);
    --checkbox-bg-color: hsla(187, 57%, 58%, 1);
    --input-shadow-color: hsla(206, 15%, 70%, 0.2);
    --input-hover-shadow-color: hsla(206, 15%, 70%, 0.4);
    --input-label-color: hsla(206, 16%, 40%, 1);
    --table-shadow-color: hsla(206, 20%, 70%, 0.3);
    --table-bg-color: hsla(270, 25%, 98%, 1);
    --table-tr-border-color: hsla(206, 16%, 90%, 1);
    --table-tr-hover-bg-color: hsla(270, 25%, 98%, 0.98);
    --table-head-tr-border-color: hsla(206, 16%, 85%, 1);
    --table-status-gray-bg-color: hsla(270, 25%, 98%, 1);
}

a.button.action.stats,
button.action.stats {
    background: #f1ecff;
}

a.button.action.stats svg,
button.action.stats svg {
    stroke-width: 2.5;
    stroke: #7c5fc5;
}

.logo-wrapper {
    display: flex;
    align-items: center; /* vertically centers children */
}

.logo-wrapper .logo {
    display: flex;
    align-items: center; /* vertically centers image and text */
    gap: 0.1rem; /* space between logo image and site name */
    line-height: 1; /* match logo link height to text height */
}

.logo-wrapper .logo img {
    display: block; /* removes inline-image baseline offset */
    height: 1em; /* keep image height equal to text height for perfect alignment */
    width: auto; /* maintain aspect ratio */
}

/* ─── Footer Layout & Social Icons ─────────────────────── */
footer {
    padding: 1rem 0;
}
.footer-inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}
.footer-logo {
    height: 32px;
    width: auto;
}

.social {
    display: flex;
    list-style: none;
    padding: 0;
    margin: 0;
    gap: 0.75rem;
}
.social li {
    margin: 0; /* remove default list spacing */
}
.social a {
    display: inline-flex;
    color: var(--text-color);
}