/**
 * Claymorphism 基础样式
 */

:root {
    /* 粉色系 */
    --clay-pink-light: #ffc8dd;
    --clay-pink-main: #ffb3d9;
    --clay-pink-medium: #ff99ac;
    --clay-pink-dark: #ff8fb3;

    /* 蓝色系 */
    --clay-blue-light: #cae9ff;
    --clay-blue-main: #a2d2ff;
    --clay-blue-medium: #7eb8e0;
    --clay-blue-dark: #5a9fd4;

    /* 紫色系 */
    --clay-purple-light: #e4c1f9;
    --clay-purple-main: #d4a5f3;
    --clay-purple-medium: #c48ee8;
    --clay-purple-dark: #b377dc;

    /* 绿色系 */
    --clay-green-light: #d8f3dc;
    --clay-green-main: #b7e4c7;

    /* 黄色系 */
    --clay-yellow-light: #fff4bd;
    --clay-yellow-main: #ffe6a7;

    /* 中性色 */
    --clay-white: #ffffff;
    --clay-gray-light: #f8f9fa;
    --clay-text-primary: #495057;
    --clay-text-secondary: #6c757d;

    /* 圆角 */
    --clay-radius-sm: 16px;
    --clay-radius-md: 24px;
    --clay-radius-lg: 32px;
    --clay-radius-xl: 48px;

    /* 阴影 */
    --clay-shadow-sm: -3px -3px 8px rgba(255, 255, 255, 0.6),
                      3px 3px 8px rgba(255, 143, 179, 0.3);
    --clay-shadow-md: -4px -4px 12px rgba(255, 255, 255, 0.6),
                      4px 4px 12px rgba(255, 143, 179, 0.4);
    --clay-shadow-lg: -6px -6px 16px rgba(255, 255, 255, 0.7),
                      6px 6px 16px rgba(255, 143, 179, 0.5);

    /* 内阴影 */
    --clay-inset-sm: inset -2px -2px 4px rgba(255, 255, 255, 0.2),
                     inset 2px 2px 4px rgba(255, 143, 179, 0.3);
    --clay-inset-md: inset -3px -3px 6px rgba(255, 255, 255, 0.3),
                     inset 3px 3px 6px rgba(255, 143, 179, 0.4);

    /* 间距 */
    --clay-space-xs: 0.5rem;
    --clay-space-sm: 1rem;
    --clay-space-md: 1.5rem;
    --clay-space-lg: 2rem;
    --clay-space-xl: 3rem;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    background: linear-gradient(135deg, #e8ebf0 0%, #e0e5ec 50%, #e8ebf0 100%);
    font-family: 'Nunito', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    color: var(--clay-text-primary);
    min-height: 100vh;
    line-height: 1.6;
    padding-top: 1px;
}

/* 滚动条样式 */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.3);
    border-radius: 10px;
}

::-webkit-scrollbar-thumb {
    background: #a0a8b8;
    border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover {
    background: #8891a0;
}