@import url(https://fonts.bunny.net/css?family=dm-sans:100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i|source-serif-4:200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i|space-mono:400,400i,700,700i);

@import "tailwindcss";
@import "tw-animate-css";

@custom-variant dark (&:is(.dark *));

:root {
    --background: #ffffff;
    --foreground: #000000;
    --card: #ffffff;
    --card-foreground: #000000;
    --popover: #ffffff;
    --popover-foreground: #000000;
    --primary: #ff3333;
    --primary-foreground: #ffffff;
    --secondary: #ffff00;
    --secondary-foreground: #000000;
    --muted: #f0f0f0;
    --muted-foreground: #333333;
    --accent: #0066ff;
    --accent-foreground: #ffffff;
    --destructive: #000000;
    --destructive-foreground: #ffffff;
    --border: #000000;
    --input: #000000;
    --ring: #ff3333;
    --chart-1: #ff3333;
    --chart-2: #ffff00;
    --chart-3: #0066ff;
    --chart-4: #00cc00;
    --chart-5: #cc00cc;
    --radius: 0px;
    --sidebar: #f0f0f0;
    --sidebar-foreground: #000000;
    --sidebar-primary: #ff3333;
    --sidebar-primary-foreground: #ffffff;
    --sidebar-accent: #0066ff;
    --sidebar-accent-foreground: #ffffff;
    --sidebar-border: #000000;
    --sidebar-ring: #ff3333;
    --shadow-x: 4px;
    --shadow-y: 4px;
    --shadow-blur: 0px;
    --shadow-spread: 0px;
    --shadow-opacity: 1;
    --shadow-color: #000000;
}

.dark {
    --background: #000000;
    --foreground: #ffffff;
    --card: #333333;
    --card-foreground: #ffffff;
    --popover: #333333;
    --popover-foreground: #ffffff;
    --primary: #ff6666;
    --primary-foreground: #000000;
    --secondary: #ffff33;
    --secondary-foreground: #000000;
    --muted: #333333;
    --muted-foreground: #cccccc;
    --accent: #3399ff;
    --accent-foreground: #000000;
    --destructive: #ffffff;
    --destructive-foreground: #000000;
    --border: #ffffff;
    --input: #ffffff;
    --ring: #ff6666;
    --chart-1: #ff6666;
    --chart-2: #ffff33;
    --chart-3: #3399ff;
    --chart-4: #33cc33;
    --chart-5: #cc33cc;
    --sidebar: #000000;
    --sidebar-foreground: #ffffff;
    --sidebar-primary: #ff6666;
    --sidebar-primary-foreground: #000000;
    --sidebar-accent: #3399ff;
    --sidebar-accent-foreground: #000000;
    --sidebar-border: #ffffff;
    --sidebar-ring: #ff6666;
    --shadow-x: 4px;
    --shadow-y: 4px;
    --shadow-blur: 0px;
    --shadow-spread: 0px;
    --shadow-opacity: 1;
    --shadow-color: #000000;
}

@theme inline {
    --font-sans: "DM Sans", "DM Sans Fallback";
    --font-mono: "Space Mono", "Space Mono Fallback";
    --color-background: var(--background);
    --color-foreground: var(--foreground);
    --color-card: var(--card);
    --color-card-foreground: var(--card-foreground);
    --color-popover: var(--popover);
    --color-popover-foreground: var(--popover-foreground);
    --color-primary: var(--primary);
    --color-primary-foreground: var(--primary-foreground);
    --color-secondary: var(--secondary);
    --color-secondary-foreground: var(--secondary-foreground);
    --color-muted: var(--muted);
    --color-muted-foreground: var(--muted-foreground);
    --color-accent: var(--accent);
    --color-accent-foreground: var(--accent-foreground);
    --color-destructive: var(--destructive);
    --color-destructive-foreground: var(--destructive-foreground);
    --color-border: var(--border);
    --color-input: var(--input);
    --color-ring: var(--ring);
    --color-chart-1: var(--chart-1);
    --color-chart-2: var(--chart-2);
    --color-chart-3: var(--chart-3);
    --color-chart-4: var(--chart-4);
    --color-chart-5: var(--chart-5);
    --radius-sm: calc(var(--radius) - 4px);
    --radius-md: calc(var(--radius) - 2px);
    --radius-lg: var(--radius);
    --radius-xl: calc(var(--radius) + 4px);
    --color-sidebar: var(--sidebar);
    --color-sidebar-foreground: var(--sidebar-foreground);
    --color-sidebar-primary: var(--sidebar-primary);
    --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
    --color-sidebar-accent: var(--sidebar-accent);
    --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
    --color-sidebar-border: var(--sidebar-border);
    --color-sidebar-ring: var(--sidebar-ring);
    --font-serif: "Source Serif 4", "Source Serif 4 Fallback";
    /* computed shadow variables below - do not modify */
    --shadow-2xs: var(--shadow-x) var(--shadow-y) color-mix(in srgb, var(--shadow-color) calc(var(--shadow-opacity) * 100%), transparent);
    --shadow-xs: var(--shadow-x) var(--shadow-y) var(--shadow-blur) var(--shadow-spread) color-mix(in srgb, var(--shadow-color) calc(var(--shadow-opacity) * 100%), transparent);
    --shadow-sm: var(--shadow-x) var(--shadow-y) calc(var(--shadow-blur) * 1.5) var(--shadow-spread) color-mix(in srgb, var(--shadow-color) calc(var(--shadow-opacity) * 100%), transparent);
    --shadow-md: calc(var(--shadow-x) * 2) calc(var(--shadow-y) * 2) calc(var(--shadow-blur) * 3) calc(var(--shadow-spread) - 1px) color-mix(in srgb, var(--shadow-color) calc(var(--shadow-opacity) * 100%), transparent);
    --shadow-lg: calc(var(--shadow-x) * 4) calc(var(--shadow-y) * 4) calc(var(--shadow-blur) * 5) calc(var(--shadow-spread) - 3px) color-mix(in srgb, var(--shadow-color) calc(var(--shadow-opacity) * 100%), transparent);
    --shadow-xl: calc(var(--shadow-x) * 6) calc(var(--shadow-y) * 6) calc(var(--shadow-blur) * 7) calc(var(--shadow-spread) - 5px) color-mix(in srgb, var(--shadow-color) calc(var(--shadow-opacity) * 100%), transparent);
    --shadow-2xl: calc(var(--shadow-x) * 8) calc(var(--shadow-y) * 8) calc(max(0px, var(--shadow-blur) * 9 - 8px)) calc(var(--shadow-spread) - 12px) color-mix(in srgb, var(--shadow-color) calc(var(--shadow-opacity) * 250%), transparent);
    --shadow: var(--shadow-md);
    --color-shadow-color: var(--shadow-color);
    --shadow-opacity: var(--shadow-opacity);
    --shadow-spread: var(--shadow-spread);
    --shadow-blur: var(--shadow-blur);
    --shadow-y: var(--shadow-y);
    --shadow-x: var(--shadow-x);
}

@layer base {
    * {
        @apply border-border outline-ring/50;
    }

    body {
        @apply bg-background text-foreground;
    }

    img {
        @apply h-full w-full;
    }
}

@layer components {
    .prose {
        color: hsl(var(--foreground));
    }

    .prose p {
        margin-bottom: 1.5rem;
        line-height: 1.75;
    }

    .prose h2 {
        font-size: 1.875rem;
        font-weight: 700;
        margin-top: 2.5rem;
        margin-bottom: 1rem;
        color: hsl(var(--foreground));
        line-height: 1.3;
    }

    .prose h3 {
        font-size: 1.5rem;
        font-weight: 600;
        margin-top: 2rem;
        margin-bottom: 0.75rem;
        color: hsl(var(--foreground));
    }

    .prose strong {
        font-weight: 600;
        color: hsl(var(--foreground));
    }

    .prose a {
        color: hsl(var(--primary));
        text-decoration: underline;
    }

    .prose a:hover {
        color: hsl(var(--accent));
    }

    .prose ul,
    .prose ol {
        margin-bottom: 1.5rem;
        padding-left: 1.5rem;
    }

    .prose li {
        margin-bottom: 0.5rem;
    }

    .prose blockquote {
        border-left: 4px solid hsl(var(--primary));
        padding-left: 1rem;
        margin: 1.5rem 0;
        font-style: italic;
        color: hsl(var(--muted-foreground));
    }
}

@layer components {
    .pagy{
        &.series-nav {
            @apply mt-8 flex items-center justify-center gap-2;
            a:not([role="separator"]) { /* all but gaps */
                @apply inline-flex items-center gap-1 px-3 py-2 text-sm font-medium border-2 border-border bg-transparent text-foreground rounded-md hover:bg-accent transition-colors;
            }

            a[role="link"]:not([aria-current]) { /* disabled links */
                @apply opacity-50 cursor-not-allowed hover:bg-transparent
            }

            a[aria-current] { /* current page */
                @apply bg-primary text-primary-foreground
                border-2 border-primary hover:bg-primary
                ;
            }
        }
    }
}