@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+Georgian:wght@500;600;700&family=Noto+Sans+Georgian:wght@400;500;600;700&family=JetBrains+Mono:wght@500;600&display=swap');

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

@layer base {
    html {
        scroll-behavior: smooth;
    }

    @media (prefers-reduced-motion: reduce) {
        html {
            scroll-behavior: auto;
        }
        *, *::before, *::after {
            animation-duration: 0.01ms !important;
            animation-iteration-count: 1 !important;
            transition-duration: 0.01ms !important;
        }
    }

    body {
        @apply bg-cream text-ink font-sans antialiased;
    }

    h1, h2, h3, h4 {
        @apply font-display;
    }

    /* visible keyboard focus everywhere */
    a:focus-visible, button:focus-visible, input:focus-visible,
    select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible {
        outline: 2px solid #C9A227;
        outline-offset: 2px;
    }
}

@layer components {
    /* Signature device: the "finish line" divider used to mark a transition
       between sections — a nod to the checkered flag / photo-finish line. */
    .finish-divider {
        @apply relative h-3 w-full overflow-hidden;
        background-image: repeating-linear-gradient(-45deg, #0A0F0C 0 8px, transparent 8px 16px);
        background-color: #C9A227;
    }

    .rank-badge {
        @apply inline-flex h-8 w-8 items-center justify-center rounded-full font-mono text-sm font-semibold text-ink;
    }
    .rank-badge--1 { @apply bg-gold; }
    .rank-badge--2 { @apply bg-silver; }
    .rank-badge--3 { @apply bg-bronze text-cream; }

    .btn-primary {
        @apply inline-flex items-center justify-center gap-2 rounded-md bg-gold px-5 py-3 font-sans font-semibold text-ink transition hover:bg-gold-light active:scale-[0.98];
    }
    .btn-outline {
        @apply inline-flex items-center justify-center gap-2 rounded-md border border-cream/30 px-5 py-3 font-sans font-semibold text-cream transition hover:border-gold hover:text-gold;
    }
    .card {
        @apply rounded-lg border border-ink/10 bg-white shadow-sm;
    }
    .status-pill {
        @apply inline-flex items-center rounded-full px-3 py-1 text-xs font-semibold;
    }
}