/* Values copied from packages/ui/styles/tokens.css: this folder has no build step. */
:root {
    color-scheme: light;
    --background: oklch(1 0 0);
    --foreground: oklch(0.145 0 0);
    --muted-foreground: oklch(0.556 0 0);
    --ring: oklch(0.55 0 0);
    --brand: #00646f;
    --brand-foreground: oklch(0.985 0 0);
}
@media (prefers-color-scheme: dark) {
    :root {
        color-scheme: dark;
        --background: oklch(0.205 0 0);
        --foreground: oklch(0.985 0 0);
        --muted-foreground: oklch(0.708 0 0);
        --ring: oklch(0.72 0 0);
    }
}
* {
    box-sizing: border-box;
    margin: 0;
}
html {
    font:
        14px/20px ui-sans-serif,
        system-ui,
        sans-serif;
    -webkit-font-smoothing: antialiased;
}
body {
    color: var(--foreground);
    background: var(--background);
}
.shell {
    min-height: 100svh;
    display: flex;
    flex-direction: column;
    padding: 32px 24px;
}
.logo {
    height: 56px;
    flex: none;
    display: flex;
    align-items: center;
}
.logo svg {
    height: 32px;
    width: auto;
}
.content {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px 0 112px;
}
.step {
    width: 100%;
    max-width: 384px;
    display: flex;
    flex-direction: column;
    gap: 24px;
}
.heading {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
h1 {
    font-size: 36px;
    line-height: 40px;
    font-weight: 600;
    letter-spacing: -0.025em;
    text-wrap: balance;
}
.lead {
    color: var(--muted-foreground);
    text-wrap: pretty;
}
.lead strong {
    color: var(--foreground);
    font-weight: 500;
}
button {
    width: 100%;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 16px;
    border: 0;
    border-radius: 6px;
    font: inherit;
    font-weight: 500;
    color: var(--brand-foreground);
    background: var(--brand);
    cursor: pointer;
}
button:hover {
    background: color-mix(in oklab, var(--brand) 88%, black);
}
button:focus-visible {
    outline: 2px solid var(--ring);
    outline-offset: 2px;
}
button svg {
    width: 16px;
    height: 16px;
    flex: none;
}
footer {
    min-height: 40px;
    flex: none;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    color: var(--muted-foreground);
}
@media (min-width: 768px) {
    .shell {
        padding-inline: 56px;
    }
}