@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 {
    /* Buttons */
    .btn {
        @apply inline-flex items-center gap-2 px-3 py-1.5 text-sm font-medium rounded-md transition-colors;
    }

    .btn-primary {
        @apply inline-flex items-center gap-2 px-3 py-1.5 text-sm font-medium rounded-md transition-colors bg-primary text-primary-foreground hover:bg-primary/90;
    }

    .btn-secondary {
        @apply inline-flex items-center gap-2 px-3 py-1.5 text-sm font-medium rounded-md transition-colors border-2 border-border bg-transparent text-foreground hover:bg-accent;
    }

    .btn-destructive {
        @apply inline-flex items-center gap-2 px-3 py-1.5 text-sm font-medium rounded-md transition-colors border-2 border-destructive bg-transparent text-destructive hover:bg-destructive hover:text-destructive-foreground;
    }

    .btn-gradient {
        @apply inline-flex items-center gap-2 px-3 py-1.5 text-sm font-medium rounded-md transition-colors bg-gradient-to-r from-purple-500 via-pink-500 to-orange-500 text-white hover:from-purple-600 hover:via-pink-600 hover:to-orange-600;
    }

    .btn-lg {
        @apply px-6 py-4 text-lg font-bold;
    }

    .btn-icon {
        @apply size-4;
    }

    /* Cards */
    .card {
        @apply overflow-hidden border-2 border-border rounded-lg bg-card;
    }

    .card-content {
        @apply p-6;
    }

    .card-post {
        @apply overflow-hidden border-2 border-border rounded-lg bg-card;
    }

    .card-post-layout {
        @apply flex flex-col md:flex-row gap-6 p-6;
    }

    .card-empty-state {
        @apply border-2 border-dashed border-border rounded-lg p-12 text-center bg-card;
    }

    .card-info {
        @apply p-4 bg-muted/50 border-2 border-border rounded-md;
    }

    .card-warning {
        @apply p-4 bg-amber-50 border-2 border-amber-200 rounded-md;
    }

    .card-auth {
        @apply bg-card border-2 border-border rounded-lg p-8 shadow-lg;
    }

    /* Media */
    .post-thumbnail {
        @apply relative w-full md:w-48 aspect-[3/4] bg-muted flex-shrink-0;
    }

    .post-thumbnail img {
        @apply object-cover;
    }

    .post-badge {
        @apply inline-flex items-center px-2.5 py-1 rounded-md text-xs font-semibold bg-black/70 text-white uppercase backdrop-blur-sm;
    }

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

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

    .badge-warning {
        @apply inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-amber-100 text-amber-800 border border-amber-300;
    }

    .badge-inline {
        @apply inline-flex items-center px-2.5 py-0.5 border-2 border-border rounded-md font-mono text-base bg-background;
    }

    /* Forms */
    .form-label {
        @apply text-sm font-medium text-foreground mb-2 block;
    }

    .form-input {
        @apply w-full px-3 py-2 border-2 border-input rounded-md bg-background text-foreground placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring;
    }

    .form-textarea {
        @apply w-full px-3 py-2 border-2 border-input rounded-md bg-background text-foreground placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring resize-none;
    }

    .form-checkbox {
        @apply mt-0.5 h-4 w-4 rounded border-2 border-input text-primary focus:ring-2 focus:ring-ring disabled:opacity-50;
    }

    .form-error {
        @apply border-4 border-red-500;
    }

    .form-error-message {
        @apply text-xs text-red-500 mt-1 font-medium;
    }

    .form-help-text {
        @apply text-xs text-muted-foreground mt-1;
    }

    .form-group {
        @apply space-y-4 p-4 bg-muted/50 border-2 border-border rounded-md;
    }

    .form-checkbox-group {
        @apply p-3 bg-muted border-2 border-border rounded-md;
    }

    .form-checkbox-label {
        @apply flex items-start gap-3 cursor-pointer;
    }

    /* Typography */
    .heading-page {
        @apply text-4xl font-bold text-foreground mb-2;
    }

    .heading-section {
        @apply text-2xl font-bold text-foreground;
    }

    .heading-card {
        @apply font-bold text-xl text-foreground mb-2;
    }

    .text-muted {
        @apply text-sm text-muted-foreground;
    }

    .text-help {
        @apply text-xs text-muted-foreground;
    }

    .text-warning {
        @apply text-sm text-amber-800 font-medium;
    }

    .text-warning-help {
        @apply text-xs text-amber-700 mt-1;
    }

    /* Layout */
    .page-container {
        @apply min-h-screen bg-background;
    }

    .page-centered {
        @apply min-h-screen bg-background flex items-center justify-center p-4;
    }

    .content-container {
        @apply container mx-auto px-4 py-8;
    }

    .section-header {
        @apply flex items-center justify-between mb-6;
    }

    /* Trigger-specific */
    .trigger-info-box {
        @apply p-4 bg-muted/50 border-2 border-border rounded-md space-y-3;
    }

    .trigger-keyword-label {
        @apply text-sm font-medium text-muted-foreground mb-1;
    }

    .trigger-message-preview {
        @apply text-sm text-foreground italic;
    }

    /* Empty States */
    .empty-state-icon {
        @apply w-20 h-20 rounded-full bg-gradient-to-br from-pink-500 via-purple-500 to-orange-500 flex items-center justify-center animate-pulse;
    }

    .empty-state-title {
        @apply text-xl font-bold text-foreground mb-2;
    }

    .empty-state-text {
        @apply text-muted-foreground mb-2 max-w-md mx-auto;
    }

    /* Logo & Branding */
    .logo-box {
        @apply w-8 h-8 bg-yellow-300 border-2 border-black;
    }

    .logo-text {
        @apply font-bold text-2xl tracking-tight;
    }

    /* Pagination */
    .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
                ;
            }
        }
    }
}