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

[x-cloak] {
    display: none !important;
}

@layer base {
    :root {
        --background: 0 0% 100%;
        --foreground: 20 14.3% 4.1%;
        --card: 0 0% 100%;
        --card-foreground: 20 14.3% 4.1%;
        --popover: 0 0% 100%;
        --popover-foreground: 20 14.3% 4.1%;
        --primary: 47.9 95.8% 53.1%;
        --primary-foreground: 26 83.3% 14.1%;
        --ring: var(--primary);
        --secondary: 60 4.8% 95.9%;
        --secondary-foreground: 24 9.8% 10%;
        --muted: 60 4.8% 95.9%;
        --muted-foreground: 25 5.3% 44.7%;
        --accent: 60 4.8% 95.9%;
        --accent-foreground: 24 9.8% 10%;
        --destructive: 0 72% 51%;
        --destructive-foreground: 60 9.1% 97.8%;
        --border: 20 5.9% 90%;
        --input: 20 5.9% 90%;
        --radius: 0.3rem;
        --chart-1: 12 76% 61%;
        --chart-2: 173 58% 39%;
        --chart-3: 197 37% 24%;
        --chart-4: 43 74% 66%;
        --chart-5: 27 87% 67%;
        --warning: 46 97% 65%;
        --success: 142 76% 36%;
        --info: 207 90% 54%;
    }

    .dark {
        --background: 0 0% 5.6%;
        --foreground: 60 9.1% 97.8%;
        --card: 0 0% 9%;
        --card-foreground: 60 9.1% 97.8%;
        --popover: 20 14.3% 4.1%;
        --popover-foreground: 60 9.1% 97.8%;
        --primary: 323 100% 70%;
        --primary-foreground: 0 0% 100%;
        --ring: var(--primary);
        --secondary: 12 6.5% 15.1%;
        --secondary-foreground: 60 9.1% 97.8%;
        --muted: 12 6.5% 15.1%;
        --muted-foreground: 24 5.4% 63.9%;
        --accent: 12 6.5% 15.1%;
        --accent-foreground: 60 9.1% 97.8%;
        --destructive: 0 72% 51%;
        --destructive-foreground: 60 9.1% 97.8%;
        --border: 12 6.5% 15.1%;
        --input: 12 6.5% 15.1%;
        --chart-1: 220 70% 50%;
        --chart-2: 160 60% 45%;
        --chart-3: 30 80% 55%;
        --chart-4: 280 65% 60%;
        --chart-5: 340 75% 55%;
        --input-background: 0 0% 9%;
        --warning: 46 97% 65%;
        --success: 142 76% 36%;
        --info: 207 90% 54%;
    }

    * {
        @apply border-border;
    }

    html {
        @apply scroll-smooth;
    }

    body {
        @apply bg-background text-foreground;
        /* font-feature-settings: "rlig" 1, "calt" 1; */
        font-synthesis-weight: none;
        text-rendering: optimizeLegibility;
    }

    [type="checkbox"]:indeterminate {
        @apply bg-primary;
    }

    main {
        @apply flex-1 items-center justify-center w-full bg-border/15 border-border border p-4;
    }
}

body {
    font-family: 'Roboto', sans-serif;
}

.markdown-body {
    @apply text-sm;
}

.markdown-body h1 {
    @apply text-3xl font-bold my-6;
}

.markdown-body h2 {
    @apply text-2xl font-bold my-5;
}

.markdown-body h3 {
    @apply text-xl font-bold my-4;
}

.markdown-body h4 {
    @apply text-lg font-bold my-3;
}

.markdown-body h5,
.markdown-body h6 {
    @apply text-base font-bold my-2;
}

.markdown-body p {
    @apply mb-4;
}

.markdown-body ul {
    @apply list-inside my-4 space-y-1;
}

.markdown-body ol {
    @apply list-decimal list-inside my-4 space-y-1;
}

.markdown-body li:not(.task-list-item) {
    @apply list-disc;
}

.markdown-body .task-list-item-wrapper {
    @apply list-none;
}

.markdown-body .task-list-item {
    @apply flex items-start gap-2 py-0.5;
}

.markdown-body .task-list-item input[type="checkbox"] {
    @apply mt-1 h-4 w-4 rounded border-gray-300 text-foreground focus:ring-foreground dark:border-gray-600 dark:bg-gray-700 dark:ring-offset-gray-800 dark:focus:ring-foreground;
}

.markdown-body blockquote {
    @apply border-l-4 border-gray-300 dark:border-gray-700 pl-4 my-4 italic;
}

.markdown-body a {
    @apply text-foreground dark:text-foreground hover:underline;
}

.markdown-body img {
    @apply max-w-full h-auto rounded-lg my-4;
}

.markdown-body pre {
    @apply bg-gray-100 dark:bg-gray-900 p-4 rounded-lg overflow-x-auto my-4;
}

.markdown-body code {
    @apply font-mono text-sm;
}

.markdown-body table {
    @apply min-w-full divide-y divide-gray-200 dark:divide-gray-800 my-4;
}

.markdown-body th {
    @apply px-6 py-3 text-left text-xs font-medium uppercase tracking-wider;
}

.markdown-body td {
    @apply px-6 py-4 whitespace-nowrap text-sm;
}

.markdown-body tr {
    @apply hover:bg-gray-50 dark:hover:bg-gray-900;
}