@import "tailwindcss";
@import "./internal/ui/views/index/index.css";
@import "./internal/ui/views/shelf/shelf.css";
@import "./internal/ui/views/login/login.css";
@import "./internal/ui/components/header/header.css";

@font-face {
    font-family: 'Epilogue';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url('/static/fonts/epilogue.woff2') format('woff2');
}

@font-face {
    font-family: 'Caveat';
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url('/static/fonts/caveat.woff2') format('woff2');
}

@theme {
    --color-canvas:  #fbf9f5;
    --color-ink:     #1a1a1a;
    --color-tonal:   #f5f4ef;
    --color-dim:     #5f5e5e;
    --color-accent:  #b1b3ab;
    --color-hover:   #e8e9e2;

    --font-primary: 'Epilogue', sans-serif;
    --font-accent:  'Caveat', cursive;
}

body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    font-family: var(--font-primary);
    background-color: var(--color-canvas);
    color: var(--color-ink);
}

main {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.container {
    margin-inline: auto;
    max-width: 80rem;
    padding: 2rem 1.125rem;
}

.button {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: theme(spacing.2);
    cursor: pointer;
    padding: theme(spacing.3) theme(spacing.5);
    font-weight: bold;
    font-family: var(--font-primary);

    &:hover {
        background-color: var(--color-hover);
        color: var(--color-ink);
    }

    &:active {
        transform: scale(0.98);
    }

    &:disabled {
        opacity: 0.5;
        cursor: not-allowed;
        pointer-events: none;
    }

    &.button-primary {
        background-color: var(--color-ink);
        color: var(--color-canvas);

        &:hover {
            background-color: var(--color-dim);
            color: var(--color-canvas);
        }
    }
}

.input {
    padding: theme(spacing.2) theme(spacing.4);
    background-color: var(--color-tonal);
    font-size: var(--text-sm);
    font-family: var(--font-primary);

    &::placeholder {
        opacity: 0.75;
    }

    &:focus {
        outline: 1px solid var(--color-ink);
        outline-offset: -2px;
    }
}

.spinner {
    width: 1rem;
    height: 1rem;
    display: none;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    from { rotate: 0deg; }
    to   { rotate: 360deg; }
}

.htmx-request .spinner {
    display: inline;
}