benchmark_ui/frontend/src/index.css

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

@layer base {
    html {
        font-feature-settings: "cv02", "cv03", "cv04", "cv11";
    }

    body {
        @apply bg-ink-950 text-ink-100 min-h-screen;
        font-family: "Inter var", "Inter", ui-sans-serif, system-ui, sans-serif;
    }

    /* Subtle grid background so the UI feels grounded rather than floating. */
    body::before {
        content: "";
        position: fixed;
        inset: 0;
        z-index: -1;
        background-image:
            radial-gradient(circle at 25% 15%, rgba(96, 165, 250, 0.08), transparent 40%),
            radial-gradient(circle at 75% 85%, rgba(232, 93, 117, 0.05), transparent 40%);
        pointer-events: none;
    }
}

@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-150
               focus:outline-none focus:ring-2 focus:ring-offset-2
               focus:ring-offset-ink-950 disabled:opacity-40
               disabled:cursor-not-allowed;
    }

    .btn-primary {
        @apply btn bg-ink-100 text-ink-950 hover:bg-white
               focus:ring-ink-300 shadow-sm;
    }

    .btn-ghost {
        @apply btn text-ink-300 hover:bg-ink-800 hover:text-ink-100
               focus:ring-ink-700;
    }

    .btn-outline {
        @apply btn border border-ink-700 text-ink-200 hover:bg-ink-800
               hover:border-ink-600 focus:ring-ink-700;
    }

    .card-surface {
        @apply rounded-xl border border-ink-800 bg-ink-900/60 backdrop-blur-sm
               shadow-xl shadow-black/20;
    }

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

    .bench-input {
        @apply w-full bg-ink-900 border border-ink-700 rounded-lg
               px-3 py-2 text-sm text-ink-100 placeholder:text-ink-600
               focus:outline-none focus:border-ink-500
               transition-colors;
    }
}

/* Custom utilities */
@layer utilities {
    .text-balance {
        text-wrap: balance;
    }
}