@import "tailwindcss";

@plugin 'tailwindcss-animate';
@plugin 'tailwind-scrollbar';

@layer components {
    .steam-news-content {
        @apply text-muted-foreground text-xs leading-relaxed;
    }

    .steam-news-content h1,
    .steam-news-content h2,
    .steam-news-content h3,
    .steam-news-content h4,
    .steam-news-content h5,
    .steam-news-content h6 {
        @apply text-foreground mb-1 font-semibold;
    }

    .steam-news-content h1 {
        @apply text-sm;
    }
    .steam-news-content h2 {
        @apply text-sm;
    }
    .steam-news-content h3 {
        @apply text-xs;
    }
    .steam-news-content h4 {
        @apply text-xs;
    }
    .steam-news-content h5 {
        @apply text-xs;
    }
    .steam-news-content h6 {
        @apply text-xs;
    }

    .steam-news-content p {
        @apply mb-1 last:mb-0;
    }

    .steam-news-content ul,
    .steam-news-content ol {
        @apply mb-1 ml-4 last:mb-0;
    }

    .steam-news-content li {
        @apply mb-0.5 last:mb-0;
    }

    .steam-news-content strong,
    .steam-news-content b {
        @apply text-foreground font-semibold;
    }

    .steam-news-content em,
    .steam-news-content i {
        @apply italic;
    }

    .steam-news-content u {
        @apply underline;
    }

    .steam-news-content br {
        @apply mb-1 block;
    }

    .steam-news-content a {
        @apply text-blue-500 transition-colors hover:text-blue-600 hover:underline;
    }

    .steam-news-content span {
        @apply text-muted-foreground;
    }

    .steam-news-title a {
        @apply text-foreground transition-colors hover:text-blue-600;
    }
}

@theme {
    --breakpoint-*: initial;
    --breakpoint-sm: 640px;
    --breakpoint-md: 768px;
    --breakpoint-lg: 1024px;
    --breakpoint-xl: 1280px;
    --breakpoint-2xl: 1536px;
    --breakpoint-3xl: 1920px;
    --breakpoint-4xl: 2560px;

    --font-heading: Cinzel, serif;
    --font-body: Merriweather, serif;
    --font-ui: Merriweather, sans-serif;

    --color-next-season: hsl(var(--nextSeason));
    --color-border: hsl(var(--border));
    --color-input: hsl(var(--input));
    --color-ring: hsl(var(--ring));
    --color-background: hsl(var(--background));
    --color-foreground: hsl(var(--foreground));

    --color-primary: hsl(var(--primary));
    --color-primary-foreground: hsl(var(--primary-foreground));

    --color-secondary: hsl(var(--secondary));
    --color-secondary-foreground: hsl(var(--secondary-foreground));

    --color-destructive: hsl(var(--destructive));
    --color-destructive-foreground: hsl(var(--destructive-foreground));

    --color-warning: hsl(var(--warning));
    --color-warning-foreground: hsl(var(--warning-foreground));

    --color-muted: hsl(var(--muted));
    --color-muted-foreground: hsl(var(--muted-foreground));

    --color-accent: hsl(var(--accent));
    --color-accent-foreground: hsl(var(--accent-foreground));

    --color-popover: hsl(var(--popover));
    --color-popover-foreground: hsl(var(--popover-foreground));

    --color-card: hsl(var(--card));
    --color-card-foreground: hsl(var(--card-foreground));

    --radius-lg: var(--radius);
    --radius-md: calc(var(--radius) / 2);
    --radius-sm: calc(var(--radius) / 4);

    --animate-accordion-down: accordion-down 0.2s ease-out;
    --animate-accordion-up: accordion-up 0.2s ease-out;
    --animate-collapsible-down: collapsible-down 0.2s ease-out forwards;
    --animate-collapsible-up: collapsible-up 0.2s ease-out forwards;

    @keyframes accordion-down {
        from {
            height: 0;
        }
        to {
            height: var(--radix-accordion-content-height);
        }
    }
    @keyframes accordion-up {
        from {
            height: var(--radix-accordion-content-height);
        }
        to {
            height: 0;
        }
    }
    @keyframes collapsible-down {
        from {
            height: 0;
        }
        to {
            height: var(--radix-collapsible-content-height);
        }
    }
    @keyframes collapsible-up {
        from {
            height: var(--radix-collapsible-content-height);
        }
        to {
            height: 0;
        }
    }
}

@utility container {
    margin-inline: auto;
    padding-inline: 1rem;
    @media (width >= theme(--breakpoint-md)) {
        padding-inline: 0rem;
    }
    @media (width >= theme(--breakpoint-lg)) {
        padding-inline: 4rem;
    }
    @media (width >= theme(--breakpoint-xl)) {
        padding-inline: 4rem;
    }
    @media (width >= theme(--breakpoint-2xl)) {
        padding-inline: 10rem;
    }
}

/*
  The default border color has changed to `currentcolor` in Tailwind CSS v4,
  so we've added these compatibility styles to make sure everything still
  looks the same as it did with Tailwind CSS v3.

  If we ever want to remove these styles, we need to add an explicit border
  color utility to any element that depends on these defaults.
*/
@layer base {
    *,
    ::after,
    ::before,
    ::backdrop,
    ::file-selector-button {
        border-color: var(--color-gray-200, currentcolor);
    }
}

@layer base {
    :root {
        --background: 240 10% 10%;
        --foreground: 0 0% 80%;
        --muted: 240 10% 13%;
        --muted-foreground: 210 0% 56%;
        --accent: 240 8% 21%;
        --accent-foreground: 210 40% 98%;
        --popover: 222 23% 15%;
        --popover-foreground: 0 0% 80%;
        --border: 240 10% 13%;
        --input: 240 10% 13%;
        --card: 240 8% 13%;
        --card-foreground: 0 0% 90%;
        --primary: 40 100% 94%;
        --primary-foreground: 0 0% 10%;
        --secondary: 50 90% 45%;
        --secondary-foreground: 210 40% 98%;
        --destructive: 15 100% 55%;
        --destructive-foreground: 210 40% 98%;
        --warning: 45 100% 66%;
        --warning-foreground: 240 10% 10%;
        --ring: 0 0% 60%;
        --radius: 0.5rem;

        --nextSeason: 131.43 100% 16.47%;
    }
}

@layer base {
    * {
        @apply border-border;
    }

    body {
        @apply bg-background text-foreground;
        font-feature-settings:
            "rlig" 1,
            "calt" 1;
        font-family: "Montserrat", sans-serif;
    }

    h1,
    h2,
    h3,
    h4 {
        font-family: "Cinzel", serif;
        font-weight: 400;
        font-style: normal;
    }
    button,
    input,
    select,
    textarea,
    label {
        font-family: "Montserrat", sans-serif;
    }

    button,
    label {
        font-weight: 600;
    }
}

@layer utilities {
    ::-webkit-scrollbar {
        width: 6px;
        height: 6px;
        background-color: var(--color-muted);
    }

    ::-webkit-scrollbar-thumb {
        background-color: var(--color-muted-foreground);
        border-radius: 9999px;
    }
}
