@tailwind base;
@tailwind components;
@tailwind utilities;

/* ── Base ── */
@layer base {
    html {
        @apply bg-bw-bg text-bw-text;
        font-family: 'Inter', system-ui, -apple-system, sans-serif;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }

    body {
        @apply bg-bw-bg text-bw-text overflow-hidden;
        height: 100dvh;
    }

    /* Scrollbar */
    ::-webkit-scrollbar {
        @apply w-1.5;
    }
    ::-webkit-scrollbar-track {
        @apply bg-bw-surface;
    }
    ::-webkit-scrollbar-thumb {
        @apply bg-bw-border-light rounded-full;
    }
    ::-webkit-scrollbar-thumb:hover {
        @apply bg-bw-subtle;
    }

    /* Selection */
    ::selection {
        @apply bg-bw-primary/40;
    }

    /* Focus ring */
    :focus-visible {
        @apply outline-none ring-2 ring-bw-primary ring-offset-2 ring-offset-bw-bg;
    }
}

/* ── Components ── */
@layer components {
    .btn {
        @apply inline-flex items-center justify-center gap-2 rounded-lg px-4 py-2
               text-sm font-medium transition-all duration-200 cursor-pointer
               disabled:opacity-50 disabled:cursor-not-allowed;
    }

    .btn-primary {
        @apply btn bg-bw-primary text-white hover:bg-bw-secondary active:scale-95;
    }

    .btn-ghost {
        @apply btn text-bw-muted hover:text-bw-text hover:bg-bw-card;
    }

    .btn-icon {
        @apply inline-flex items-center justify-center rounded-full p-2
               transition-all duration-200 cursor-pointer
               text-bw-muted hover:text-bw-text hover:bg-bw-card
               disabled:opacity-50 disabled:cursor-not-allowed;
    }

    .card {
        @apply bg-bw-card rounded-xl border border-bw-border p-4
               transition-colors duration-200 hover:border-bw-border-light;
    }

    .input {
        @apply block w-full rounded-lg bg-bw-card border border-bw-border
               text-bw-text placeholder-bw-subtle px-4 py-2.5 text-sm
               focus:outline-none focus:border-bw-primary focus:ring-1 focus:ring-bw-primary
               transition-colors duration-200;
    }

    .label {
        @apply block text-sm font-medium text-bw-muted mb-1.5;
    }

    .badge {
        @apply inline-flex items-center rounded-full px-2.5 py-0.5
               text-xs font-medium;
    }

    .badge-primary {
        @apply badge bg-bw-primary/20 text-bw-secondary;
    }

    /* Player progress range input */
    .range-player {
        @apply appearance-none h-1 rounded-full bg-bw-border cursor-pointer;
        accent-color: theme('colors.bw.primary');
    }
    .range-player::-webkit-slider-thumb {
        @apply appearance-none w-3 h-3 rounded-full bg-bw-text opacity-0
               transition-opacity duration-200;
    }
    .range-player:hover::-webkit-slider-thumb {
        @apply opacity-100;
    }
}

/* ── Utilities ── */
@layer utilities {
    .truncate-2 {
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    .no-select {
        user-select: none;
        -webkit-user-select: none;
    }
}