@import "tailwindcss";
@plugin "@tailwindcss/typography";

@theme inline {
    /* Colors */
    --color-background: #100b14;
    --color-foreground: #180161;
    --color-primary: #eb3779;
    --color-secondary: #571b8b;
    --color-accent: #fb793c;
    --color-text: #ebe4f1;
    --color-border: color-mix(in srgb, var(--color-text) 20%, transparent);
    --color-border-active: color-mix(
        in srgb,
        var(--color-text) 60%,
        transparent
    );

    /* Defaults */
    --default-transition-duration: 0.3s;

    /* Fonts */
    --font-sans: var(--font-lexend);
}

/* Touch targets — WCAG 2.1 AA: minimum 44×44px */
.touch-target {
    min-height: 44px;
    min-width: 44px;
}

/* Gamepad focus ring — visible only when gamepad navigation is active */
.gamepad-focus :focus,
.gamepad-focus:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
    border-radius: 4px;
}

/* Thin scrollbar for horizontal scroll sections */
.scrollbar-thin {
    scrollbar-width: thin;
    scrollbar-color: color-mix(in srgb, var(--color-text) 15%, transparent) transparent;
}

.scrollbar-thin::-webkit-scrollbar {
    height: 4px;
}

.scrollbar-thin::-webkit-scrollbar-track {
    background: transparent;
}

.scrollbar-thin::-webkit-scrollbar-thumb {
    background: color-mix(in srgb, var(--color-text) 15%, transparent);
    border-radius: 2px;
}