@import "tailwindcss";
@plugin "@tailwindcss/typography";

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

@theme {
    --color-background: #ffffff;
    --color-surface: #f4f4f5;

    --color-foreground: #18181b;
    --color-muted: #52525b;
    --color-border: #e4e4e7;

    --color-primary: #ff6b2c;
    --color-blue: #4169e1;
    --color-green: #00c853;
    --color-purple: #9b59b6;
    --color-pink: #ff69b4;
    --color-yellow: #ffd93d;
    --color-red: #ff4757;

    --font-display: "Bricolage Grotesque", system-ui, sans-serif;

    --shadow-custom: 4px 4px 0 #ff6b2c;
    --shadow-custom-lg: 6px 6px 0 #ff6b2c;
    --shadow-custom-hover: 8px 8px 0 #ff6b2c;

    --border-primary: 3px solid var(--color-primary);

    --radius-none: 0;
}

@layer theme {
    .dark {
        --color-background: #0d0d0d;
        --color-surface: #1a1a1a;

        --color-foreground: #f0f0f0;
        --color-muted: #999999;
        --color-border: #27272a;
    }
}

.dark {
    --color-background: #0d0d0d;
    --color-surface: #1a1a1a;

    --color-foreground: #f0f0f0;
    --color-muted: #999999;
    --color-border: #27272a;
}

html {
    font-size: 20px;
    color-scheme: light dark;
}

body {
    font-size: 1.1rem;
    transition: background-color 0.2s ease, color 0.2s ease;
}

@layer base {
    body {
        @apply font-display bg-background text-foreground leading-relaxed overflow-x-hidden;
    }

    h1 { @apply text-5xl font-black mb-10 text-foreground tracking-tight; }
    h2 { @apply text-3xl font-bold mt-16 mb-6 text-primary uppercase tracking-widest border-b border-border dark:border-surface pb-2; }
    h3 { @apply text-2xl font-bold mt-10 mb-4 text-foreground/90; }

    .prose p {
        @apply mb-8 text-foreground/90 max-w-3xl;
    }

    .prose a, 
    .prose h1 a, .prose h2 a, .prose h3 a, 
    .prose h4 a, .prose h5 a, .prose h6 a {
        @apply no-underline transition-colors;
        text-decoration: none !important;
        border-bottom: none !important;
    }

    .prose p a {
        @apply text-primary font-semibold hover:text-foreground transition-colors;
    }

    .prose blockquote {
        @apply border-l-4 border-primary bg-surface/70 py-2 px-6 italic my-10 text-foreground/90;
    }

    .prose code {
        @apply bg-surface text-primary px-1.5 py-0.5 rounded font-mono text-sm border border-border;
    }

    .prose pre {
        @apply border border-border dark:border-white/10;
    }
}

/* Shiki dual themes */
html.dark .shiki,
html.dark .shiki span {
    color: var(--shiki-dark) !important;
    background-color: var(--shiki-dark-bg) !important;
}

html:not(.dark) .shiki,
html:not(.dark) .shiki span {
    color: var(--shiki-light) !important;
    background-color: var(--shiki-light-bg) !important;
}

/* responsive container for youtube/video embeds generated by markdown */
.embed-responsive {
  position: relative;
  width: 100%;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
}

.embed-responsive iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}