@import "tailwindcss";

@plugin "tailwindcss-animate";
@plugin "@tailwindcss/typography";

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

@theme {
    --color-background: rgb(245, 245, 245);
    --color-muted-background: oklch(0.2 0 0);
    --color-foreground: oklch(0.145 0 0);
    --color-card: oklch(1 0 0);
    --color-card-foreground: oklch(0.145 0 0);
    --color-popover: oklch(1 0 0);
    --color-popover-foreground: oklch(0.145 0 0);
    --color-primary: oklch(0.93 0.24 116); /* rgb(223, 255, 27) */
    --color-primary-foreground: oklch(0.145 0 0); /* Black text on bright green */
    --color-secondary: oklch(0.97 0 0);
    --color-secondary-foreground: oklch(0.205 0 0);
    --color-muted: oklch(0.97 0 0);
    --color-muted-foreground: oklch(0.556 0 0);
    --color-accent: oklch(0.97 0 0);
    --color-accent-foreground: oklch(0.205 0 0);
    --color-destructive: oklch(0.577 0.245 27.325);
    --color-border: oklch(0.922 0 0);
    --color-input: oklch(0.922 0 0);
    --color-ring: oklch(0.708 0 0);

    /* Chart colors */
    --color-chart-1: oklch(0.646 0.222 41.116);
    --color-chart-2: oklch(0.6 0.118 184.704);
    --color-chart-3: oklch(0.398 0.07 227.392);
    --color-chart-4: oklch(0.828 0.189 84.429);
    --color-chart-5: oklch(0.769 0.188 70.08);

    /* Sidebar colors */
    --color-sidebar: oklch(0.205 0 0);
    --color-sidebar-foreground: oklch(0.261 0.005 285.823);
    --color-sidebar-primary: oklch(0.1 0.006 285.823);
    --color-sidebar-primary-foreground: oklch(0.98 0 0);
    --color-sidebar-accent: oklch(0.959 0.001 286.375);
    --color-sidebar-accent-foreground: oklch(0.1 0.006 285.823);
    --color-sidebar-border: oklch(0.91 0.013 286.32);
    --color-sidebar-ring: oklch(0.592 0.912 217.2);

    /* Site header colors */
    --color-site-header-background: oklch(0.205 0 0);
    --color-site-header-border: oklch(1 0 0 / 10%);

    /* Border radius */
    --radius: 0.625rem;

    /* Custom viewport height for framer */
    --framer-viewport-height: 400px;
}

@layer theme {
    .dark & {
        --color-background: oklch(0.141 0.005 285.823);
        --color-foreground: oklch(0.985 0 0);
        --color-card: oklch(0.205 0 0);
        --color-card-foreground: oklch(0.985 0 0);
        --color-popover: oklch(0.205 0 0);
        --color-popover-foreground: oklch(0.985 0 0);
        --color-primary: oklch(0.922 0 0);
        --color-primary-foreground: oklch(0.205 0 0);
        --color-secondary: oklch(0.269 0 0);
        --color-secondary-foreground: oklch(0.985 0 0);
        --color-muted: oklch(0.269 0 0);
        --color-muted-foreground: oklch(0.708 0 0);
        --color-accent: oklch(0.269 0 0);
        --color-accent-foreground: oklch(0.985 0 0);
        --color-destructive: oklch(0.704 0.191 22.216);
        --color-border: oklch(1 0 0 / 10%);
        --color-input: oklch(1 0 0 / 15%);
        --color-ring: oklch(0.556 0 0);

        /* Chart colors for dark mode */
        --color-chart-1: oklch(0.488 0.243 264.376);
        --color-chart-2: oklch(0.696 0.17 162.48);
        --color-chart-3: oklch(0.769 0.188 70.08);
        --color-chart-4: oklch(0.627 0.265 303.9);
        --color-chart-5: oklch(0.645 0.246 16.439);

        /* Sidebar colors for dark mode */
        --color-sidebar: oklch(0.1 0.006 285.823);
        --color-sidebar-foreground: oklch(0.959 0.001 286.375);
        --color-sidebar-primary: oklch(0.483 0.763 224.3);
        --color-sidebar-primary-foreground: oklch(1 0 0);
        --color-sidebar-accent: oklch(0.159 0.006 286.033);
        --color-sidebar-accent-foreground: oklch(0.959 0.001 286.375);
        --color-sidebar-border: oklch(0.159 0.006 286.033);
        --color-sidebar-ring: oklch(0.592 0.912 217.2);

        /* Site header colors for dark mode */
        --color-site-header-background: oklch(0.483 0.763 224.3);
    }
}

@layer base {
    * {
        @apply border-border outline-ring/50;
    }

    body {
        @apply bg-background text-foreground m-0;
        font-family:
            -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }

    code {
        font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New", monospace;
    }

    button {
        @apply cursor-pointer;
    }

    /* Thread viewport specific styling */
    .thread-viewport > [data-radix-scroll-area-content] {
        @apply flex flex-col items-center self-stretch bg-inherit;
    }

    /* Custom scrollbar styles */
    ::-webkit-scrollbar {
        width: 8px;
        height: 8px;
    }

    ::-webkit-scrollbar-track {
        background: transparent;
        border-radius: 4px;
    }

    ::-webkit-scrollbar-thumb {
        background: oklch(0.7 0 0 / 0.3);
        border-radius: 4px;
        transition: background-color 0.2s ease-out;
    }

    ::-webkit-scrollbar-thumb:hover {
        background: oklch(0.6 0 0 / 0.5);
    }

    ::-webkit-scrollbar-corner {
        background: transparent;
    }

    /* Dark mode scrollbar */
    .dark ::-webkit-scrollbar-thumb {
        background: oklch(0.4 0 0 / 0.4);
    }

    .dark ::-webkit-scrollbar-thumb:hover {
        background: oklch(0.5 0 0 / 0.6);
    }

    /* Firefox scrollbar */
    * {
        scrollbar-width: thin;
        scrollbar-color: oklch(0.7 0 0 / 0.3) transparent;
    }

    .dark * {
        scrollbar-color: oklch(0.4 0 0 / 0.4) transparent;
    }

    /* Shiki dual theme support for dark mode */
    html.dark .shiki,
    html.dark .shiki span {
        color: var(--shiki-dark) !important;
        background-color: var(--shiki-dark-bg) !important;
        /* Optional font styles */
        font-style: var(--shiki-dark-font-style) !important;
        font-weight: var(--shiki-dark-font-weight) !important;
        text-decoration: var(--shiki-dark-text-decoration) !important;
    }
}
