@import "tailwindcss";

@layer theme {
    :root {
        --primary: var(--color-blue-600);
        --success: var(--color-green-600);
        --warning: var(--color-orange-600);
        --danger: var(--color-red-600);

        --app-bg: var(--color-white); /* 应用背景色 */
        --app-bg-reversal: var(--color-zinc-900); /* 应用反转背景色 */
        --app-foreground: var(--color-zinc-100); /* 应用前景色 */


        --app-text-main: var(--color-zinc-950); /* 应用主文字色 */
        --app-text-muted: var(--color-zinc-600); /* 应用次级文字色*/
        --app-border: var(--color-zinc-500); /* 应用边框色*/
        --app-border-light: var(--color-zinc-300); /* 应用浅边框色 */
        --app-ring: var(--color-zinc-300);
        --app-text-reversal: var(--color-zinc-100); /* 应用反转文字色 */
    }

    [data-theme="dark"] {
        --app-text-reversal: var(--color-zinc-950);
        --app-bg-reversal: var(--color-zinc-50);
        --app-bg: var(--color-zinc-950);
        --app-text-main: var(--color-zinc-50);
        --app-text-muted: var(--color-zinc-400);
        --app-ring: var(--color-zinc-600);
        --app-foreground: var(--color-zinc-900);
    }

    [data-theme="coffee"] {
        --app-bg: #2c2420;
        --app-text-main: #f3e5d8;
        --app-ring: #8b5e3c;
    }

    @keyframes accordion-down {
        from {
            height: 0;
        }
        to {
            height: var(--kb-accordion-content-height);
        }
    }

    @keyframes accordion-up {
        from {
            height: var(--kb-accordion-content-height);
        }
        to {
            height: 0;
        }
    }

    @keyframes fade-in {
        from {
            opacity: 0;
        }
        to {
            opacity: 1;
        }
    }

    @keyframes fade-out {
        from {
            opacity: 1;
        }
        to {
            opacity: 0;
        }
    }

    @keyframes collapsible-down {
        from {
            height: 0;
        }
        to {
            height: var(--kb-collapsible-content-height);
        }
    }

    @keyframes collapsible-up {
        from {
            height: var(--kb-collapsible-content-height);
        }
        to {
            height: 0;
        }
    }

    @keyframes slide-in {
        from {
            transform: translateX(calc(100% + var(--viewport-padding)));
        }
        to {
            transform: translateX(0);
        }
    }

    @keyframes hide {
        from {
            opacity: 1;
        }
        to {
            opacity: 0;
        }
    }

    @keyframes swipe-out {
        from {
            transform: translateX(var(--kb-toast-swipe-end-x));
        }
        to {
            transform: translateX(calc(100% + var(--viewport-padding)));
        }
    }
}

/* --- 2. 注册到 Tailwind 主题系统 --- */
@theme {
    --color-primary: var(--primary);
    --color-success: var(--success);
    --color-warning: var(--warning);
    --color-danger: var(--danger);

    --color-app: var(--app-bg);
    --color-foreground: var(--app-foreground);
    --color-reversal-bg: var(--app-bg-reversal);
    --color-main: var(--app-text-main);
    --color-muted: var(--app-text-muted);
    --color-reversal: var(--app-text-reversal);
    --color-base: var(--app-border);
    --color-light: var(--app-border-light);
    --radius-app: 0.75rem;

    /* 注册动画到主题 */
    --animate-accordion-down: accordion-down 0.2s ease-out;
    --animate-accordion-up: accordion-up 0.2s ease-out;

    --animate-in: fade-in 0.2s ease-in;
    --animate-out: fade-out 0.2s ease-out forwards;

    --animate-collapsible-down: collapsible-down 0.2s ease-out;
    --animate-collapsible-up: collapsible-up 0.2s ease-out;

    --animate-slide-in: slide-in 150ms cubic-bezier(0.16, 1, 0.3, 1);
    --animate-hide: hide 100ms ease-in;
    --animate-swipe-out: swipe-out 100ms ease-out;

    --viewport-padding: 16px;
}

/* --- 3. 暗色主题变体 --- */
@custom-variant dark (&:where([data-theme="dark"], [data-theme="dark"] *));