@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
@import "tailwindcss";

@plugin "flyonui";


@theme {
  /* Mapping your custom variables to Tailwind classes */
  --color-background: var(--c-bg);
  --color-surface: var(--c-surface);
  --color-border: var(--c-border);
  --color-text-main: var(--c-text-main);
  --color-text-muted: var(--c-text-muted);
  --color-white: var(--c-text-main);
  --color-wh: var(--c-wh);
  
  --font-sans: "Inter", ui-sans-serif, system-ui, sans-serif;
  
  --background-image-glow-gradient: var(--bg-glow);
  --background-image-card-gradient: var(--bg-card);
}

/* Base Variable Definitions */
:root {
    --color-primary: #3182ce;
    --code-bg: #1e1e1e;
    --c-bg: #FFFFFF;
    --c-wh: #FFFFFF;
    --c-surface: #F9FAFB;
    --c-border: #E5E7EB;
    --c-text-main: #111827;
    --c-text-muted: #545963;
    --bg-glow: radial-gradient(circle at 50% -20%, rgba(59, 130, 246, 0.10), rgba(255, 255, 255, 0));
    --bg-card: linear-gradient(180deg, rgba(0,0,0,0.02) 0%, rgba(0,0,0,0.0) 100%);
}

.dark {
    --color-primary: #3182ce;
    --code-bg: #0d1117;
    --c-bg: #03050C;
    --c-wh: #FFFFFF;
    --c-surface: #0E111C;
    --c-border: rgba(255, 255, 255, 0.08);
    --c-text-main: #FFFFFF;
    --c-text-muted: #959597;
    --bg-glow: radial-gradient(circle at 50% 50%, rgba(59, 130, 246, 0.15), rgba(0, 0, 0, 0));
    --bg-card: linear-gradient(180deg, rgba(255,255,255,0.03) 0%, rgba(255,255,255,0.0) 100%);
}

/* Custom Component Styles from your HTML 6B7280, 595E69     7d7e80, 8c8d8f*/
body { 
    @apply bg-background text-text-main antialiased; 
    transition: background-color 0.3s, color 0.3s; 
}

.theme-transition { transition: background-color 0.3s, border-color 0.3s, color 0.3s; }

/* Timeline UI */
.step-line {
    @apply absolute w-px bg-border;
    top: 40px; left: 15px; bottom: -20px;
}

/* Syntax Highlighting */
.token-keyword { color: #ff7b72; }
.token-string { color: #a5d6ff; }
.token-function { color: #d2a8ff; }

/* Manual override if the Tailwind variant isn't compiling */
a.active {
    @apply text-blue-500 border-l-2 border-blue-500;
}

/* Container for the code block */
.shiki {
  @apply relative rounded-lg my-8 border border-white/10 shadow-2xl;
  padding: 3.5rem 1.5rem 1.5rem 1.5rem; /* Increased top padding */
  background-color: #0d0f14;
  font-family: 'JetBrains Mono', 'Fira Code', monospace;
  font-size: 0.95rem;
  line-height: 1.7;
  overflow-x: auto;
}

/* The Terminal Title Bar (The Buttons) */
.shiki::before {
  content: ""; 
  @apply absolute top-0 left-0 right-0 h-10 border-b border-wh/5;
  background-color: #1a1d23;
  border-radius: 8px 8px 0 0;
  
  /* The Dots */
  /* background-image: 
    radial-gradient(circle, #ff5f56 4px, transparent 5px),
    radial-gradient(circle, #ffbd2e 4px, transparent 5px),
    radial-gradient(circle, #27c93f 4px, transparent 5px); */
  background-repeat: no-repeat;
  /* Fixed positioning on the left */
  background-position: 16px center, 32px center, 48px center;
}

/* The Language Badge (The Text) */
.shiki::after {
  content: attr(data-lang);
  /* Use left-16 to start the text well after the buttons */
  @apply absolute top-0 left-4 h-10 flex items-center 
         text-[14px] font-black tracking-widest text-wh/40 
         uppercase pointer-events-none;
}

/* Ensure code doesn't wrap awkwardly */
.shiki code {
  @apply block overflow-x-auto p-1 pt-2;
  scrollbar-width: thin;
  counter-reset: step;
  counter-increment: section 0;
}

.shiki pre {
  margin: 0;
  overflow: visible; /* Let the 'code' tag handle the scroll */
}

.shiki span.line:hover {
  @apply bg-wh/5;
}

.shiki .line::before {
  content: counter(step);
  counter-increment: step;
  @apply mr-6 inline-block w-4 text-right text-wh/20 select-none;
}

/* Scrollbar */
::-webkit-scrollbar { width: 6px; scroll-behavior: smooth}
::-webkit-scrollbar-thumb { background: var(--c-border); border-radius: 4px; }

.glass-card {
            background: var(--c-surface);
            backdrop-filter: blur(10px);
            border: 1px solid var(--c-border);
            transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
            position: relative;
            overflow: hidden;
        }

        .glass-card:hover {
            /* 1. Brighten the border */
            border-color: rgba(59, 130, 246, 0.5);
            
            /* 2. Add the outer glow (Blue tint) */
            box-shadow: 0 0 20px rgba(59, 130, 246, 0.15), 
                        0 0 40px rgba(59, 130, 246, 0.1);
            
            /* 3. Lift the card slightly */
            transform: translateY(-2px);
            
        }

        /* Optional: Subtle inner light effect */
        .glass-card::before {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 1px;
            background: linear-gradient(90deg, transparent, rgba(59, 130, 246, 0.4), transparent);
            opacity: 0;
            transition: opacity 0.4s;
        }

        .glass-card:hover::before {
            opacity: 1;
        }


#sidebar-backdrop {
    backdrop-filter: blur(4px); /* Optional: makes the dark tint look premium */
}

/* Ensure that if we resize from mobile to desktop, the backdrop disappears */
@media (min-width: 1024px) {
    #sidebar-backdrop {
        display: none !important;
    }
    body {
        overflow: auto !important;
    }
}

/* Target the Pagefind result elements directly */
#search-results .pagefind-ui__result-link,
#search-results .pagefind-ui__result-excerpt,
#search-results .pagefind-ui__message {
  @apply text-text-main; /* Or 'text-base-content' if using FlyonUI defaults */
}

/* Specific fix for light mode visibility */
:root[data-theme="light"] #search-results {
  --pagefind-ui-text: #1f2937; /* A dark gray/black */
}

/* Ensure the background of the results matches your FlyonUI surface */
#search-results {
  @apply bg-surface text-text-muted;
}

#search-results .a .div {
  @apply text-text-main;
}

/* Ensure the article matches your typography */
.blog-content {
    color: var(--c-text-muted);
    font-size: 15px;
    line-height: 1.8;
}

.blog-content h1, .blog-content h2, .blog-content h3 {
    @apply text-text-main font-bold tracking-tight mt-10 mb-4;
}

.blog-content h2 { @apply text-2xl border-b border-border pb-2; }

.blog-content p { @apply mb-6; }

.blog-content blockquote {
    @apply border-l-2 border-primary bg-primary/5 px-6 py-4 italic rounded-r-lg my-8 text-text-main;
}

/* Fix for the Shiki Terminal Styling */
/* Your JS adds .shiki-container, so we style that */
.shiki-container {
    @apply glass-card !bg-[#0d0f14] my-10 relative rounded-lg border border-white/10 shadow-2xl;
    padding: 3.5rem 1.5rem 1.5rem 1.5rem !important;
}

/* Reuse your existing ::after badge logic on the container injected by Shiki */
.shiki-container::after {
    content: attr(data-lang);
    @apply absolute top-0 left-4 h-10 flex items-center 
           text-[12px] font-black tracking-widest text-wh/30 
           uppercase pointer-events-none;
}

/* The Terminal Buttons (Fake) */
.shiki-container::before {
    content: ""; 
    @apply absolute top-3 left-4 w-3 h-3 rounded-full bg-red-500/50 shadow-[20px_0_0_rgba(251,191,36,0.5),40px_0_0_rgba(52,211,153,0.5)];
}