:root {
    --color: #0066CC;

    --swatch-10: color-mix(in srgb, var(--color), white 92%);
    --swatch-20: color-mix(in srgb, var(--color), white 80%);
    --swatch-30: color-mix(in srgb, var(--color), white 64%);
    --swatch-40: color-mix(in srgb, var(--color), white 32%);
    --swatch-50: var(--color);
    --swatch-60: color-mix(in srgb, var(--color), black 24%);
    --swatch-70: color-mix(in srgb, var(--color), black 48%);
    --swatch-80: color-mix(in srgb, var(--color), black 64%);
    --swatch-90: color-mix(in srgb, var(--color), black 80%);
}

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

body {
    height: 100vh;
    background: white;
    font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
        Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
}

main {
    width: 100%;
    height: 100%;
    margin: auto;
    display: flex;
    align-items: center;
    justify-content: center;
}

.controls-container {
    background: #fff;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 48px;
    padding: 96px;
}

.upper-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 32px;
}

.ds-logo {
    width: max-content;
    height: max-content;
    text-decoration: none;
    opacity: 0.8;
    transition: opacity 0.25s ease-in;
}

.ds-logo:hover {
    opacity: 1;
    cursor: pointer;
}

.ds-logo svg {
    height: 48px;
}

.ds-logo svg path {
    fill: #000;
}

.subtitle {
    color: #86868b;
    font-size: 17px;
    font-weight: 400;
    line-height: 24px;
    letter-spacing: -0.212px;
    text-align: center;
}

.color-input-wrapper {
    position: relative;
    max-width: 360px;
    width: 100%;
}

.color-input-wrapper::after {
    content: "Hex code";
    width: max-content;
    position: absolute;
    z-index: 1;
    left: 20px;
    top: -11px;
    font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
        Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 22px;
    letter-spacing: -0.175px;
    color: #86868b;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0px 4px;
}

.color-input-container {
    position: relative;
    max-width: 360px;
    width: 100%;
}

.hash-prefix {
    position: absolute;
    left: 20px;
    top: 50%;
    transform: translateY(-50%);
    color: #86868b;
    font-size: 17px;
    font-weight: 400;
    pointer-events: none;
    z-index: 2;
}

#color-input {
    padding: 16px 20px 16px 35px;
    border: 1px solid #e8e8ed;
    background-color: #fff;
    color: #1d1d1f;
    border-radius: 12px;
    max-width: 360px;
    width: 100%;
    font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
        Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
    font-size: 17px;
    font-weight: 400;
    line-height: 24px;
    letter-spacing: -0.212px;
    text-transform: uppercase;
}

#color-input:focus {
    border: 1px solid #0071e3;
    outline: 1px solid #0071e3;
    background-color: #fff;
}

#generate-btn {
    padding: 8px 24px;
    background-color: #0071e3;
    color: white;
    border: none;
    max-width: 360px;
    width: 100%;
    border-radius: 8px;
    cursor: pointer;
    font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
        Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 22px;
    letter-spacing: -0.175px;
    transition: background-color 0.2s ease, opacity 0.2s ease;
}

#generate-btn:hover:not(:disabled) {
    background-color: #06c;
}

#generate-btn:active:not(:disabled) {
    background-color: #00488f;
}

#generate-btn:focus:not(:disabled) {
    outline: 4px solid #0071e380;
}

#generate-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.palette-container {
    background: #fafafc;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 48px;
    padding: 96px;
}

.palette {
    display: grid;
    align-items: center;
    justify-content: center;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-content: center;
    gap: 48px 32px;
    max-width: 360px;
    width: 100%;
}

.swatch {
    margin: auto;
    max-width: 80px;
    width: 100%;
    height: 100%;
    aspect-ratio: 4 / 4;
    font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
        Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
    font-size: 12px;
    font-weight: 400;
    line-height: 20px;
    letter-spacing: -0.15px;
    padding: 12px 16px;
    border-radius: 16px;
    display: flex;
    cursor: pointer;
    position: relative;
    transition: transform 0.1s ease-in-out, opacity 0.2s ease;
}

.swatch.disabled {
    opacity: 0.3;
    cursor: not-allowed;
    pointer-events: none;
}

.swatch::after {
    content: attr(data-color);
    position: absolute;
    top: -25%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: #1d1d1f;
    color: #f5f5f7;
    padding: 4px 8px;
    font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
        Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
    font-size: 12px;
    font-weight: 400;
    line-height: 20px;
    letter-spacing: -0.15px;
    border-radius: 8px;
    opacity: 0;
    pointer-events: none;
    white-space: nowrap;
    transition: opacity 0.2s ease;
}

.swatch:hover::after {
    opacity: 1;
}

.swatch.copied::after {
    content: "Copied!";
    background-color: green;
}

.palette .swatch-10 {
    background-color: var(--swatch-10);
    color: black;
}

.palette .swatch-20 {
    background-color: var(--swatch-20);
    color: black;
}

.palette .swatch-30 {
    background-color: var(--swatch-30);
    color: black;
}

.palette .swatch-40 {
    background-color: var(--swatch-40);
    color: black;
}

.palette .swatch-50 {
    background-color: var(--swatch-50);
    color: white;
}

.palette .swatch-60 {
    background-color: var(--swatch-60);
    color: white;
}

.palette .swatch-70 {
    background-color: var(--swatch-70);
    color: white;
}

.palette .swatch-80 {
    background-color: var(--swatch-80);
    color: white;
}

.palette .swatch-90 {
    background-color: var(--swatch-90);
    color: white;
}

@media (max-width: 1068px) {
    body {
        height: 100%;
    }

    main {
        flex-direction: column;
    }

    .controls-container {
        padding: 96px 48px;
    }

    .palette-container {
        padding: 96px 48px;
    }
}

@media (max-width: 767px) {
    .controls-container {
        padding: 96px 24px;
    }

    .palette-container {
        padding: 96px 24px;
    }
}