// uno.config.ts
// import type { Theme } from '@unocss/preset-mini'
import {
  defineConfig,
  presetAttributify,
  presetIcons,
  presetTypography,
  presetUno,
  presetWebFonts,
  transformerDirectives,
  transformerVariantGroup,
} from "unocss";
import { presetDaisy } from "unocss-preset-daisy";

export default defineConfig({
  cli: {
    entry: {
      // Scan all Rust files for CSS classes
      // This ensures utilities like px, py, flex, grid, etc. are discovered
      patterns: [
        // Main crates
        "crates/client/src/**/*.rs",
        "crates/server/src/**/*.rs",
        "crates/shared/src/**/*.rs",
        "crates/components/src/**/*.rs",
        "crates/pages/src/**/*.rs",
        // Also scan any external rustelo component crates (e.g., from workspace)
        "{{RUSTELO_ROOT}}/crates/**/*.rs",
        // HTMX Minijinja templates — project and framework
        "crates/pages_htmx/templates/**/*.j2",
        "{{RUSTELO_ROOT}}/crates/foundation/crates/rustelo_pages_htmx/templates/**/*.j2",
      ],
      outFile: "site/public/styles/website.css",
    },
  },
  // Safelist critical utilities and design system classes
  safelist: [
    // Core utilities
    "flex",
    "grid",
    "inline-flex",
    "inline-grid",
    "justify-center",
    "items-center",
    "gap-1",
    "gap-2",
    "gap-3",
    "gap-4",
    "gap-6",
    "p-1",
    "p-2",
    "p-3",
    "p-4",
    "p-6",
    "p-8",
    "px-1",
    "px-2",
    "px-3",
    "px-4",
    "px-6",
    "px-8",
    "py-1",
    "py-2",
    "py-3",
    "py-4",
    "py-6",
    "py-8",
    "m-1",
    "m-2",
    "m-3",
    "m-4",
    "m-6",
    "m-8",
    "mx-auto",
    "my-auto",
    "mb-2",
    "mb-3",
    "mb-4",
    "mb-6",
    "mt-2",
    "mt-4",
    "text-center",
    "text-left",
    "text-right",
    "w-full",
    "h-full",
    "h-12",
    "h-14",
    "h-15",
    "h-16",
    "h-20",
    "h-24",
    "h-28",
    "h-32",
    "h-36",
    "h-40",
    "h-48",
    "min-h-screen",
    "object-contain",
    "object-cover",
    "rounded",
    "rounded-md",
    "rounded-lg",
    "rounded-xl",
    "rounded-full",
    "border",
    "border-2",
    "border-solid",
    "shadow",
    "shadow-sm",
    "shadow-md",
    "shadow-lg",
    "bg-white",
    "bg-black",
    "dark:bg-slate-900",
    "dark:bg-gray-800",
    "dark:bg-gray-700",
    "border-gray-200",
    "dark:border-gray-700",
    "text-white",
    "text-black",
    "text-gray-700",
    "dark:text-gray-300",
    "opacity-50",
    "opacity-75",
    "opacity-100",
    // Filter classes
    "filter-selected",
    "filter-hidden",
  ],
  // Include design system CSS
  layers: {
    "design-system": -1,
    components: 0,
    utilities: 1,
  },
  shortcuts: [
    {
      // Design System Button Components
      "ds-btn":
        "inline-flex items-center justify-center font-[var(--font-medium)] transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:opacity-50 disabled:pointer-events-none border-none cursor-pointer no-underline",
      "ds-btn-sm":
        "ds-btn px-[var(--space-3)] py-[var(--space-1-5)] text-[var(--text-sm)] rounded-[var(--radius-md)]",
      "ds-btn-md":
        "ds-btn px-[var(--space-4)] py-[var(--space-2)] text-[var(--text-sm)] rounded-[var(--radius-md)]",
      "ds-btn-lg":
        "ds-btn px-[var(--space-6)] py-[var(--space-3)] text-[var(--text-base)] rounded-[var(--radius-md)]",

      "ds-btn-primary":
        "ds-btn-md bg-[var(--color-brand-primary)] text-[var(--color-neutral-50)] hover:bg-[var(--color-brand-primary)] focus:ring-[var(--color-brand-primary)]/20",
      "ds-btn-secondary":
        "ds-btn-md bg-[var(--color-neutral-200)] text-[var(--color-neutral-900)] hover:bg-[var(--color-neutral-300)] focus:ring-[var(--color-neutral-200)]/20",
      "ds-btn-ghost":
        "ds-btn-md bg-transparent text-[var(--color-neutral-700)] hover:bg-[var(--color-neutral-100)] dark:text-[var(--color-neutral-300)] dark:hover:bg-[var(--color-neutral-800)]",
      "ds-btn-ghost-sm":
        "ds-btn-sm bg-transparent text-[var(--color-neutral-700)] hover:bg-[var(--color-neutral-100)] dark:text-[var(--color-neutral-300)] dark:hover:bg-[var(--color-neutral-800)]",
      "ds-btn-danger":
        "ds-btn-md bg-[var(--color-error)] text-[var(--color-neutral-50)] hover:bg-[var(--color-error)] focus:ring-[var(--color-error)]/20",
      "ds-btn-content-category-filter":
        "ds-btn-md bg-transparent text-[var(--color-neutral-700)] hover:bg-[var(--color-neutral-100)] dark:text-[var(--color-neutral-300)] dark:hover:bg-[var(--color-neutral-800)]",

      // Design System Navigation Components
      "ds-nav-link":
        "no-underline font-[var(--font-sans)] antialiased text-[var(--text-sm)] text-[var(--color-neutral-600)] dark:text-[var(--color-neutral-400)] flex items-center gap-x-[var(--space-2)] p-[var(--space-1)] hover:text-[var(--color-brand-primary)] transition-colors duration-200",
      "ds-nav-link-active": "ds-nav-link text-[var(--color-brand-primary)]",
      // Sidebar/vertical nav item — no justify-center, no DaisyUI btn, no browser border
      "ds-nav-item":
        "flex items-center gap-2 w-full px-3 py-2 rounded-md text-sm font-medium border-none cursor-pointer no-underline transition-colors text-[var(--color-neutral-600)] dark:text-[var(--color-neutral-400)] hover:bg-[var(--color-neutral-100)] dark:hover:bg-[var(--color-neutral-800)] bg-transparent",
      "ds-nav-item-active":
        "flex items-center gap-2 w-full px-3 py-2 rounded-md text-sm font-medium border-none cursor-pointer no-underline bg-[var(--color-brand-primary)] text-[var(--color-neutral-50)] dark:text-[var(--color-neutral-50)]",

      // Design System Card Components
      "ds-card":
        "bg-[var(--color-neutral-50)] dark:bg-[var(--color-neutral-800)] rounded-[var(--radius-lg)] shadow-[var(--shadow-sm)] border border-[var(--color-neutral-200)] dark:border-[var(--color-neutral-600)] p-[var(--space-6)]",
      "ds-card-hover":
        "ds-card hover:shadow-[var(--shadow-md)] transition-shadow duration-200",
      "ds-card-title":
        "ds-heading-4 ds-text mb-2 text-balance sm:ds-heading-3 mb-ds-4",
      "ds-card-subtitle":
        "ds-heading-3 ds-text mb-2 text-balance sm:ds-heading-2 mb-ds-3",
      "ds-card-featured":
        "inline-flex items-end px-2.5 py-0.5 rounded-full text-xs font-medium transition-colors",

      "ds-card-text": "ds-text-secondary ds-body max-w-2xl mx-auto",

      // Design System Form Components
      "ds-input":
        "w-full px-[var(--space-3)] py-[var(--space-2)] text-[var(--text-sm)] text-[var(--color-neutral-900)] dark:text-[var(--color-neutral-50)] border border-[var(--color-neutral-300)] dark:border-[var(--color-neutral-600)] rounded-[var(--radius-md)] bg-[var(--color-neutral-50)] dark:bg-[var(--color-neutral-800)] transition-colors duration-200 focus:outline-none focus:ring-2 focus:border-[var(--color-brand-primary)] focus:ring-[var(--color-brand-primary)]/20",
      "ds-textarea": "ds-input min-h-[6rem] resize-y",
      "ds-select": "ds-input cursor-pointer",

      // Design System Badge Components
      "ds-badge":
        "inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium transition-colors",
      "ds-badge-primary":
        "ds-badge bg-[var(--color-brand-primary)] text-white hover:bg-[var(--color-brand-primary)]/90",
      "ds-badge-secondary":
        "ds-badge bg-[var(--color-brand-secondary)] text-white hover:bg-[var(--color-brand-secondary)]/90",
      "ds-badge-outline":
        "ds-badge border border-[var(--color-neutral-300)] dark:border-[var(--color-neutral-600)] bg-transparent text-[var(--color-neutral-700)] dark:text-[var(--color-neutral-300)] hover:bg-[var(--color-neutral-100)] dark:hover:bg-[var(--color-neutral-800)]",
      "ds-badge-ghost":
        "ds-badge bg-[var(--color-neutral-100)] dark:bg-[var(--color-neutral-800)] text-[var(--color-neutral-700)] dark:text-[var(--color-neutral-300)] hover:bg-[var(--color-neutral-200)] dark:hover:bg-[var(--color-neutral-700)]",
      "ds-badge-sm": "text-xs px-2 py-0.5",
      "ds-badge-neutral":
        "ds-badge bg-[var(--color-neutral-200)] text-[var(--color-neutral-700)] dark:bg-[var(--color-neutral-700)] dark:text-[var(--color-neutral-200)] hover:opacity-90",
      "ds-badge-accent":
        "ds-badge bg-[var(--color-success)] text-white hover:bg-[var(--color-success)]/90",
      "ds-badge-primary-focus": "bg-[var(--color-brand-primary)]/80 text-white",

      // Design System Theme Toggle
      "ds-theme-toggle":
        "ds-btn p-[var(--space-2)] text-[var(--text-sm)] bg-[var(--color-neutral-50)] dark:bg-[var(--color-neutral-900)] text-[var(--color-neutral-900)] dark:text-[var(--color-neutral-50)] border border-[var(--color-neutral-200)] dark:border-[var(--color-neutral-700)] rounded-[var(--radius-lg)] hover:bg-[var(--color-neutral-100)] dark:hover:bg-[var(--color-neutral-800)] focus:ring-[var(--color-brand-primary)]/20",

      // Design System Layout & Background Components
      "ds-bg":
        "bg-[var(--color-neutral-50)] dark:bg-[var(--color-neutral-950)]",
      "ds-bg-secondary":
        "bg-[var(--color-neutral-100)] dark:bg-[var(--color-neutral-800)]",
      "ds-bg-page":
        "bg-[var(--color-neutral-100)] dark:bg-[var(--color-neutral-900)]",
      "ds-bg-muted":
        "bg-[var(--color-neutral-400)] dark:bg-[var(--color-neutral-600)]",
      "ds-bg-overlay":
        "bg-[var(--color-neutral-600)] bg-opacity-50 dark:bg-[var(--color-neutral-800)] dark:bg-opacity-75",

      // Design System Text Components
      "ds-text":
        "text-[var(--color-neutral-900)] dark:text-[var(--color-neutral-50)]",
      "ds-text-secondary":
        "text-[var(--color-neutral-600)] dark:text-[var(--color-neutral-400)]",
      "ds-text-muted":
        "text-[var(--color-neutral-500)] dark:text-[var(--color-neutral-500)]",

      // Design System Typography Scale
      "ds-text-xs": "text-[var(--text-xs)] leading-[var(--leading-tight)]",
      "ds-text-sm": "text-[var(--text-sm)] leading-[var(--leading-normal)]",
      "ds-text-base": "text-[var(--text-base)] leading-[var(--leading-normal)]",
      "ds-text-lg": "text-[var(--text-lg)] leading-[var(--leading-relaxed)]",
      "ds-text-xl": "text-[var(--text-xl)] leading-[var(--leading-relaxed)]",
      "ds-text-2xl": "text-[var(--text-2xl)] leading-[var(--leading-tight)]",
      "ds-text-3xl": "text-[var(--text-3xl)] leading-[var(--leading-tight)]",
      "ds-text-4xl": "text-[var(--text-4xl)] leading-[var(--leading-tight)]",

      // Design System Border Components
      "ds-border":
        "border-[var(--color-neutral-200)] dark:border-[var(--color-neutral-700)]",
      "ds-border-light":
        "border-[var(--color-neutral-100)] dark:border-[var(--color-neutral-800)]",

      // Design System Shadow Components
      "ds-shadow-sm": "shadow-[var(--shadow-sm)]",
      "ds-shadow": "shadow-[var(--shadow-base)]",
      "ds-shadow-md": "shadow-[var(--shadow-md)]",
      "ds-shadow-lg": "shadow-[var(--shadow-lg)]",

      // Design System Rounded Components
      "ds-rounded-sm": "rounded-[var(--radius-sm)]",
      "ds-rounded": "rounded-[var(--radius-base)]",
      "ds-rounded-md": "rounded-[var(--radius-md)]",
      "ds-rounded-lg": "rounded-[var(--radius-lg)]",
      "ds-rounded-xl": "rounded-[var(--radius-xl)]",

      // Design System Complete Patterns
      "ds-page":
        "ds-bg-page font-[var(--font-sans)] text-[var(--color-neutral-900)] dark:text-[var(--color-neutral-50)]",
      "ds-heading-1":
        "ds-text-4xl font-[var(--font-bold)] ds-text mb-[var(--space-6)]",
      "ds-heading-2":
        "ds-text-3xl font-[var(--font-semibold)] ds-text mb-[var(--space-4)]",
      "ds-heading-3":
        "ds-text-2xl font-[var(--font-semibold)] ds-text mb-[var(--space-4)]",
      "ds-heading-4":
        "ds-text-xl font-[var(--font-semibold)] ds-text mb-[var(--space-3)]",
      "ds-body":
        "ds-text-base ds-text-secondary mb-[var(--space-4)] leading-[var(--leading-relaxed)]",
      "ds-caption": "ds-text-sm ds-text-muted",

      // Responsive Container System
      "ds-container": "mx-auto px-[var(--space-4)] max-w-7xl",
      "ds-container-sm": "mx-auto px-[var(--space-4)] max-w-2xl",
      "ds-container-md": "mx-auto px-[var(--space-4)] max-w-4xl",
      "ds-container-lg": "mx-auto px-[var(--space-4)] max-w-6xl",

      // Legacy compatibility (marked for deprecation)
      "theme-bg": "ds-bg",
      "theme-bg-secondary": "ds-bg-secondary",
      "theme-bg-page": "ds-bg-page",
      "theme-text": "ds-text",
      "theme-text-secondary": "ds-text-secondary",
      "theme-text-muted": "ds-text-muted",
      "theme-border": "ds-border",
      "theme-card": "ds-card",
      "theme-toggle": "ds-theme-toggle",
      "nav-link": "ds-nav-link",

      // Standard utility classes for compatibility
      round: "rounded-full",
      rounded: "rounded-md",
      "rounded-sm": "rounded-sm",
      "rounded-lg": "rounded-lg",
      "rounded-xl": "rounded-xl",
      "rounded-2xl": "rounded-2xl",
      "rounded-3xl": "rounded-3xl",
      "rounded-full": "rounded-full",
      "rounded-none": "rounded-none",

      // Shadow utilities
      shadow: "shadow-md",
      "shadow-sm": "shadow-sm",
      "shadow-lg": "shadow-lg",
      "shadow-xl": "shadow-xl",
      "shadow-none": "shadow-none",

      // Common spacing
      "m-auto": "mx-auto my-auto",
      "mx-auto": "mx-auto",
      "text-center": "text-center",
      "text-left": "text-left",
      "text-right": "text-right",

      // Legacy shortcuts (maintain compatibility)
      btn: "px-4 py-1 rounded inline-block bg-primary text-white cursor-pointer tracking-wide op90 hover:op100 disabled:cursor-default disabled:bg-gray-600 disabled:!op50 disabled:pointer-events-none",
      "indigo-btn":
        "ml-5 capitalize !text-2xl !text-indigo-800 !bg-indigo-200 border-0.5 !border-indigo-500 dark:!text-indigo-200 dark:!bg-indigo-800 hover:!bg-gray-100 dark:hover:!bg-gray-700 focus:outline-none focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-700 rounded-lg font-bold !p-5 md:!p-8",
      "icon-btn":
        "text-1.2em cursor-pointer select-none opacity-75 transition duration-200 ease-in-out hover:opacity-100 hover:text-primary disabled:pointer-events-none",
      "square-btn":
        "flex flex-gap-2 items-center border border-base px2 py1 relative !outline-none",
      "square-btn-mark":
        "absolute h-2 w-2 bg-primary -right-0.2rem -top-0.2rem",

      "bg-base": "bg-white dark:bg-[#121212]",
      "bg-overlay": "bg-[#eee]:50 dark:bg-[#222]:50",
      "bg-header": "bg-gray-500:5",
      "bg-active": "bg-gray-500:8",
      "bg-hover": "bg-gray-500:20",
      "border-base": "border-gray-400:10",

      "tab-button": "font-light op50 hover:op80 h-full px-4",
      "tab-button-active": "op100 bg-gray-500:10",
    },
    [/^(flex|grid)-center/g, () => "justify-center items-center"],
    [/^(flex|grid)-x-center/g, () => "justify-center"],
    [/^(flex|grid)-y-center/g, () => "items-center"],
  ],
  rules: [
    ["max-h-screen", { "max-height": "calc(var(--vh, 1vh) * 100)" }],
    ["h-screen", { height: "calc(var(--vh, 1vh) * 100)" }],
  ],
  //  theme: <Theme>{
  theme: {
    colors: {
      // Legacy colors (maintain compatibility)
      ok: "var(--c-ok)",
      primary: "var(--c-primary)",
      "primary-deep": "var(--c-primary-deep)",
      mis: "var(--c-mis)",

      // Design System Brand Colors
      "ds-brand-primary": "var(--color-brand-primary, #3b82f6)",
      "ds-brand-secondary": "var(--color-brand-secondary, #6366f1)",
      "ds-brand-accent": "var(--color-brand-accent, #f59e0b)",

      // Design System Semantic Colors
      "ds-success": "var(--color-success, #10b981)",
      "ds-warning": "var(--color-warning, #f59e0b)",
      "ds-error": "var(--color-error, #ef4444)",
      "ds-info": "var(--color-info, #06b6d4)",

      // Design System Neutral Scale
      "ds-neutral-50": "var(--color-neutral-50, #f9fafb)",
      "ds-neutral-100": "var(--color-neutral-100, #f3f4f6)",
      "ds-neutral-200": "var(--color-neutral-200, #e5e7eb)",
      "ds-neutral-300": "var(--color-neutral-300, #d1d5db)",
      "ds-neutral-400": "var(--color-neutral-400, #9ca3af)",
      "ds-neutral-500": "var(--color-neutral-500, #6b7280)",
      "ds-neutral-600": "var(--color-neutral-600, #4b5563)",
      "ds-neutral-700": "var(--color-neutral-700, #374151)",
      "ds-neutral-800": "var(--color-neutral-800, #1f2937)",
      "ds-neutral-900": "var(--color-neutral-900, #111827)",
      "ds-neutral-950": "var(--color-neutral-950, #030712)",

      // Legacy theme colors (marked for deprecation)
      "theme-primary": "var(--color-brand-primary, #3b82f6)",
      "theme-secondary": "var(--color-brand-secondary, #6366f1)",
      "theme-success": "var(--color-success, #10b981)",
      "theme-error": "var(--color-error, #ef4444)",
    },
    spacing: {
      // Design System Spacing Scale
      "ds-0": "var(--space-0, 0)",
      "ds-px": "var(--space-px, 1px)",
      "ds-0.5": "var(--space-0-5, 0.125rem)",
      "ds-1": "var(--space-1, 0.25rem)",
      "ds-1.5": "var(--space-1-5, 0.375rem)",
      "ds-2": "var(--space-2, 0.5rem)",
      "ds-2.5": "var(--space-2-5, 0.625rem)",
      "ds-3": "var(--space-3, 0.75rem)",
      "ds-4": "var(--space-4, 1rem)",
      "ds-5": "var(--space-5, 1.25rem)",
      "ds-6": "var(--space-6, 1.5rem)",
      "ds-8": "var(--space-8, 2rem)",
      "ds-10": "var(--space-10, 2.5rem)",
      "ds-12": "var(--space-12, 3rem)",
      "ds-16": "var(--space-16, 4rem)",
      "ds-20": "var(--space-20, 5rem)",
      "ds-24": "var(--space-24, 6rem)",
      "ds-32": "var(--space-32, 8rem)",
      "ds-40": "var(--space-40, 10rem)",
      "ds-48": "var(--space-48, 12rem)",
      "ds-56": "var(--space-56, 14rem)",
      "ds-64": "var(--space-64, 16rem)",
      "ds-80": "var(--space-80, 20rem)",
      "ds-96": "var(--space-96, 24rem)",

      // Legacy spacing (marked for deprecation)
      "theme-xs": "var(--space-1, 0.25rem)",
      "theme-sm": "var(--space-2, 0.5rem)",
      "theme-md": "var(--space-4, 1rem)",
      "theme-lg": "var(--space-6, 1.5rem)",
      "theme-xl": "var(--space-8, 2rem)",
    },
    borderRadius: {
      // Design System Border Radius
      "ds-none": "var(--radius-none, 0)",
      "ds-sm": "var(--radius-sm, 0.125rem)",
      "ds-base": "var(--radius-base, 0.25rem)",
      "ds-md": "var(--radius-md, 0.375rem)",
      "ds-lg": "var(--radius-lg, 0.5rem)",
      "ds-xl": "var(--radius-xl, 0.75rem)",
      "ds-2xl": "var(--radius-2xl, 1rem)",
      "ds-3xl": "var(--radius-3xl, 1.5rem)",
      "ds-full": "var(--radius-full, 9999px)",

      // Legacy radius (marked for deprecation)
      "theme-sm": "var(--radius-sm, 0.125rem)",
      "theme-md": "var(--radius-md, 0.375rem)",
      "theme-lg": "var(--radius-lg, 0.5rem)",
      "theme-xl": "var(--radius-xl, 0.75rem)",
    },
    fontFamily: {
      // Design System Typography
      "ds-sans": "var(--font-sans, ui-sans-serif, system-ui, sans-serif)",
      "ds-serif": "var(--font-serif, ui-serif, Georgia, serif)",
      "ds-mono": "var(--font-mono, ui-monospace, 'Cascadia Code', monospace)",

      // Legacy fonts (marked for deprecation)
      "theme-sans": "var(--font-sans, ui-sans-serif, system-ui, sans-serif)",
      "theme-mono":
        "var(--font-mono, ui-monospace, 'Cascadia Code', monospace)",
    },
    others: {
      "dd-list": "w-2 h-2 ds-bg-muted ds-rounded-full mt-6 flex-shrink-0",
    },
    fontSize: {
      // Design System Typography Scale
      "ds-xs": "var(--text-xs, 0.75rem)",
      "ds-sm": "var(--text-sm, 0.875rem)",
      "ds-base": "var(--text-base, 1rem)",
      "ds-lg": "var(--text-lg, 1.125rem)",
      "ds-xl": "var(--text-xl, 1.25rem)",
      "ds-2xl": "var(--text-2xl, 1.5rem)",
      "ds-3xl": "var(--text-3xl, 1.875rem)",
      "ds-4xl": "var(--text-4xl, 2.25rem)",
      "ds-5xl": "var(--text-5xl, 3rem)",
      "ds-6xl": "var(--text-6xl, 3.75rem)",
    },
    fontWeight: {
      // Design System Font Weights
      "ds-thin": "var(--font-thin, 100)",
      "ds-light": "var(--font-light, 300)",
      "ds-normal": "var(--font-normal, 400)",
      "ds-medium": "var(--font-medium, 500)",
      "ds-semibold": "var(--font-semibold, 600)",
      "ds-bold": "var(--font-bold, 700)",
      "ds-extrabold": "var(--font-extrabold, 800)",
      "ds-black": "var(--font-black, 900)",
    },
  },
  presets: [
    presetUno(),
    presetAttributify(),
    presetIcons({
      scale: 1.2,
      autoInstall: true,
      collections: {
        carbon: () =>
          import("@iconify-json/carbon/icons.json").then((i) => i.default),
      },
    }),
    presetTypography(),
    presetDaisy(),
  ],
  // Custom CSS for code blocks and syntax highlighting
  preflights: [
    {
      getCSS: () => `
        /* Global Font */
        body {
          font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
        }

        /* Code Block Styling - Light and Dark Theme Support */

        /* CSS Variables for Code Blocks */
        :root {
          /* Light theme code colors */
          --code-bg: #f8fafc;
          --code-border: #e2e8f0;
          --code-text: #334155;
          --code-comment: #64748b;
          --code-keyword: #0f172a;
          --code-string: #059669;
          --code-number: #dc2626;
          --code-function: #2563eb;
          --code-variable: #7c3aed;
          --inline-code-bg: #f1f5f9;
          --inline-code-text: #475569;
        }

        .dark {
          /* Dark theme code colors */
          --code-bg: #1e293b;
          --code-border: #334155;
          --code-text: #e2e8f0;
          --code-comment: #94a3b8;
          --code-keyword: #f8fafc;
          --code-string: #34d399;
          --code-number: #fca5a5;
          --code-function: #60a5fa;
          --code-variable: #a78bfa;
          --inline-code-bg: #374151;
          --inline-code-text: #d1d5db;
        }

        /* Pre elements (code blocks) */
        pre {
          background-color: var(--code-bg) !important;
          border: 1px solid var(--code-border);
          border-radius: var(--radius-md, 0.375rem);
          padding: 1.25rem 1.5rem;
          margin: 1.5rem 0;
          overflow-x: auto;
          line-height: 1.6;
          font-family: ui-monospace, SFMono-Regular, 'SF Mono', Consolas, 'Liberation Mono', Menlo, monospace;
          font-size: 0.875rem;
          position: relative;
        }

        /* Code elements inside pre (code blocks) */
        pre code {
          background-color: transparent !important;
          padding: 0 !important;
          border-radius: 0;
          color: var(--code-text);
          font-size: inherit;
          font-weight: 400;
        }

        /* Inline code elements */
        code:not(pre code) {
          background-color: var(--inline-code-bg) !important;
          color: var(--inline-code-text) !important;
          padding: 0.125rem 0.375rem;
          border-radius: var(--radius-sm, 0.125rem);
          font-size: 0.875em;
          font-weight: 500;
          font-family: ui-monospace, SFMono-Regular, 'SF Mono', Consolas, 'Liberation Mono', Menlo, monospace;
          border: 1px solid var(--code-border);
        }

        /* Remove backticks from UnoCSS prose */
        :is([prose=""], .prose) :where(:not(pre) > code):not(:where(.not-prose, .not-prose *))::before,
        :is([prose=""], .prose) :where(:not(pre) > code):not(:where(.not-prose, .not-prose *))::after {
          content: "" !important;
        }

        /* Override highlight.js default styles to use our theme variables */
        .hljs {
          background: var(--code-bg) !important;
          color: var(--code-text) !important;
        }

        /* Scrollbar styling for code blocks */
        pre::-webkit-scrollbar {
          height: 8px;
        }

        pre::-webkit-scrollbar-track {
          background: transparent;
        }

        pre::-webkit-scrollbar-thumb {
          background-color: var(--code-border);
          border-radius: 4px;
        }

        pre::-webkit-scrollbar-thumb:hover {
          background-color: var(--code-comment);
        }

        /* Dark theme scrollbar */
        .dark pre::-webkit-scrollbar-thumb {
          background-color: var(--color-neutral-600);
        }

        .dark pre::-webkit-scrollbar-thumb:hover {
          background-color: var(--color-neutral-500);
        }

        /* Enhanced code block with better spacing for blog posts */
        .prose pre,
        [prose=""] pre {
          margin: 2rem 0 !important;
          line-height: 1.7;
        }

        .prose code,
        [prose=""] code {
          font-size: 0.875em;
        }

        /* Responsive adjustments */
        @media (max-width: 768px) {
          pre {
            padding: 1rem;
            margin: 1rem -1rem;
            border-radius: 0;
            border-left: none;
            border-right: none;
          }
        }

        /* Focus and accessibility */
        pre:focus-within {
          outline: 2px solid var(--color-brand-primary);
          outline-offset: 2px;
        }

        code:focus {
          outline: 2px solid var(--color-brand-primary);
          outline-offset: 1px;
        }

        /* Remove highlight.js default background and let our styles take precedence */
        pre code.hljs {
          background: transparent !important;
        }

        /* Custom Filter Classes for Prescription Filtering */
        .filter-selected {
          background-color: #2563eb !important;
          border-color: #2563eb !important;
          color: #ffffff !important;
        }

        .filter-hidden {
          display: none !important;
        }
      `,
    },
  ],
  transformers: [transformerDirectives(), transformerVariantGroup()],
});
