:root {
    --bg: #090a0f;
    --surface: #11131a;
    --surface-2: #181b24;
    --border: rgba(255, 255, 255, 0.09);

    --text: #f7f7fa;
    --muted: #a5a8b5;

    --pink: #ff4f9a;
    --purple: #a855f7;
    --indigo: #6366f1;

    --danger: #ff6b6b;
    --success: #4ade80;

    --radius: 18px;
    --radius-small: 10px;

    --shadow: 0 24px 80px rgba(0, 0, 0, 0.35);
}

* {
    box-sizing: border-box;
}

html {
    min-height: 100%;
}

body {
    margin: 0;
    min-height: 100vh;
    font-family:
        Inter,
        ui-sans-serif,
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;
    background: var(--bg);
    color: var(--text);
}

button,
input,
select,
textarea {
    font: inherit;
}

button,
a {
    -webkit-tap-highlight-color: transparent;
}

a {
    color: inherit;
}

.hidden {
    display: none !important;
}

.brand {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    color: #fff;
    text-decoration: none;
    font-weight: 750;
    letter-spacing: -0.02em;
}

.brand-mark {
    width: 38px;
    height: 38px;
    border-radius: 12px;
    display: grid;
    place-items: center;
    background: linear-gradient(
        135deg,
        var(--pink),
        var(--purple),
        var(--indigo)
    );
    box-shadow: 0 10px 30px rgba(168, 85, 247, 0.28);
    font-weight: 850;
}

.button {
    border: 0;
    border-radius: 12px;
    min-height: 46px;
    padding: 0 20px;
    cursor: pointer;
    font-weight: 700;
    transition:
        transform 0.15s ease,
        opacity 0.15s ease;
}

.button:hover {
    transform: translateY(-1px);
}

.button:disabled {
    cursor: not-allowed;
    opacity: 0.65;
    transform: none;
}

.button-primary {
    color: white;
    background: linear-gradient(
        135deg,
        var(--pink),
        var(--purple)
    );
}

.button-secondary {
    color: var(--text);
    background: var(--surface-2);
    border: 1px solid var(--border);
}