/* Fedi-inspired design tokens */

:root {
    --color-primary: #0B1013;
    --color-white: #FFFFFF;
    --color-success: #00A829;
    --color-link: #0277F2;
    --color-orange: #DF7B00;
    --color-dark-grey: #6D7071;
    --color-grey: #858789;
    --color-light-grey: #D3D4DB;
    --color-extra-light-grey: #E9E9EA;

    --font-family: 'Albert Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 20px;
    --radius-xl: 40px;
}

/* Base */
body {
    font-family: var(--font-family);
    color: var(--color-primary);
    -webkit-font-smoothing: antialiased;
}

.text-primary {
    color: var(--color-primary);
}

/* Gradient background — Fedi "sky" inspired */
.bg-gradient-sky {
    background: radial-gradient(
        ellipse at 50% 30%,
        #FFF8E8 0%,
        #FFF0D4 25%,
        #FFE8C0 50%,
        #F8F4EF 75%,
        #F5F5F5 100%
    );
    min-height: 100vh;
}

/* Buttons */
.btn-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 48px;
    padding: 0 24px;
    border-radius: var(--radius-xl);
    background: var(--color-primary);
    color: var(--color-white);
    font-weight: 600;
    font-size: 16px;
    border: none;
    cursor: pointer;
    transition: filter 100ms ease, opacity 100ms ease;
}

.btn-primary:hover {
    filter: brightness(1.2);
}

.btn-primary:active {
    filter: brightness(0.9);
}

.btn-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 48px;
    padding: 0 24px;
    border-radius: var(--radius-xl);
    background: var(--color-white);
    color: var(--color-primary);
    font-weight: 600;
    font-size: 16px;
    border: 1.5px solid var(--color-light-grey);
    cursor: pointer;
    transition: border-color 100ms ease;
}

.btn-secondary:hover {
    border-color: var(--color-primary);
}

/* Inputs */
.input-field {
    height: 48px;
    padding: 0 16px;
    border-radius: var(--radius-lg);
    border: 1.5px solid var(--color-light-grey);
    font-size: 16px;
    font-family: var(--font-family);
    outline: none;
    transition: border-color 150ms ease;
    box-sizing: border-box;
}

.input-field:focus {
    border-color: var(--color-primary);
}

textarea.input-field {
    height: auto;
    padding: 12px 16px;
    resize: vertical;
}

/* Cards */
.rounded-2xl {
    border-radius: var(--radius-lg);
}

/* Utility overrides */
.font-sans {
    font-family: var(--font-family);
}