:root {
    --background: #101010;
    --foreground: #fff;
    --border: color-mix(in srgb, var(--foreground) 10%, transparent);
    --accent: #416de5;
    --radius: 14px;
}

* {
    font-family: "Inter", sans-serif;
    margin: 0;
    padding: 0;
}

body {
    background: var(--background);
    color: var(--foreground);
}

footer {
    margin-top: auto;
    padding: 1.5rem;
    text-align: center;
    font-size: 12px;
    font-weight: 300;
    opacity: 50%;
}

button {
    cursor: pointer;
    background: var(--accent);
    border-radius: var(--radius);
    border: none;
    padding: 6px 12px;
    color: var(--foreground);
    font-weight: 400;
    transition: all 100ms ease-out;
}

button:hover {
    background: color-mix(in srgb, var(--accent), #fff 10%);
}

button:active {
    background: color-mix(in srgb, var(--accent), #000 10%);
}

button[data-type="secondary"] {
    background: #ffffff25;
}

button[data-type="secondary"]:hover {
    background: color-mix(in srgb, #ffffff25, #fff 10%);
}

button[data-type="secondary"]:active {
    background: color-mix(in srgb, #ffffff25, #000 10%);
}