/* Global design system: Apple precision + MUJI restraint */

:root {
    --ui-font-sans: "Share Tech Mono", "IBM Plex Mono", "VT323", "Noto Sans SC", monospace;
    --ui-font-mono: "Share Tech Mono", "IBM Plex Mono", "VT323", monospace;

    /* Nothing-style palette: 黑白灰极简 + 红点缀 */
    --nothing-black: #000000;
    --nothing-white: #ffffff;
    --nothing-gray-900: #0a0a0a;
    --nothing-gray-800: #141414;
    --nothing-gray-700: #1a1a1a;
    --nothing-gray-600: #262626;
    --nothing-gray-500: #525252;
    --nothing-gray-400: #737373;
    --nothing-gray-300: #a3a3a3;
    --nothing-accent-red: #e53935;

    --ui-color-brand: #1455d9;
    --ui-color-brand-soft: #e9f0ff;
    --ui-color-ink: #1a2331;
    --ui-color-ink-soft: #50627e;
    --ui-color-bg: #f3f5f9;
    --ui-color-surface: #ffffff;
    --ui-color-surface-soft: #f7f9fd;
    --ui-color-line: #d7e0ec;
    --ui-color-line-strong: #b8c6db;

    --ui-color-success: #2c8a52;
    --ui-color-warning: #c77a18;
    --ui-color-danger: #c34532;

    --ui-space-1: 4px;
    --ui-space-2: 8px;
    --ui-space-3: 12px;
    --ui-space-4: 16px;
    --ui-space-5: 20px;
    --ui-space-6: 24px;
    --ui-space-8: 32px;
    --ui-space-10: 40px;
    --ui-space-12: 48px;

    --ui-radius-sm: 10px;
    --ui-radius-md: 16px;
    --ui-radius-lg: 22px;
    --ui-radius-pill: 999px;

    --tool-title-size: clamp(24px, 3vw, 32px);
    --tool-subtitle-size: 14px;
    --tool-content-size: 14px;

    --ui-shadow-sm: 0 8px 18px rgba(20, 35, 57, 0.08);
    --ui-shadow-md: 0 18px 34px rgba(20, 35, 57, 0.12);
    --ui-shadow-lg: 0 28px 60px rgba(20, 35, 57, 0.16);

    --ui-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

html,
body {
    font-family: var(--ui-font-sans);
    color: var(--ui-color-ink);
}

input,
select,
textarea,
button {
    font-family: inherit;
}

input:focus,
select:focus,
textarea:focus {
    outline: none;
    border-color: rgba(20, 85, 217, 0.45);
    box-shadow: 0 0 0 3px rgba(20, 85, 217, 0.15);
}

.ui-motion-enter {
    animation: uiFadeUp 380ms var(--ui-ease) both;
}

@keyframes uiFadeUp {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation: none !important;
        transition: none !important;
        scroll-behavior: auto !important;
    }
}