/**
 * 设计系统变量 - 温暖人文风格
 * Design System Variables - Warm Humanistic Style
 */

:root {
    color-scheme: light;

    /* ==========================================
       色彩方案 - Color Palette
       ========================================== */

    /* 背景色 - Background Colors */
    --color-bg: #FDFBF7;              /* 米白背景 - Cream white */
    --color-bg-subtle: #F7F5F0;       /* 卡片背景 - Card background */
    --color-bg-muted: #EDEBE6;        /* 分隔线/边框 - Dividers/borders */
    --color-bg-dark: #2D2D2D;         /* 深色背景（页脚） */
    --color-bg-elevated: rgba(253, 251, 247, 0.92);
    --color-overlay: rgba(26, 26, 26, 0.55);

    /* 文字色 - Text Colors */
    --color-text: #1A1A1A;            /* 主文字 - Primary text (深灰而非纯黑) */
    --color-text-secondary: #666666;  /* 次要文字 - Secondary text */
    --color-text-muted: #999999;      /* 辅助文字 - Muted text */
    --color-text-inverse: #FFFFFF;    /* 反色文字 - Inverse text */

    /* 主色调 - Primary Colors (温暖的珊瑚/橙色) */
    --color-primary: #E07A5F;         /* 珊瑚红 - Coral red */
    --color-primary-hover: #C96A50;   /* 悬停状态 - Hover state */
    --color-primary-light: #F4D5CE;   /* 浅色背景 - Light background */
    --color-primary-dark: #B55A44;    /* 深色变体 - Dark variant */

    /* 辅助色 - Secondary Colors */
    --color-accent: #3D5A80;          /* 深蓝灰 - Deep blue-gray (链接) */
    --color-accent-hover: #2E4662;    /* 链接悬停 - Link hover */
    --color-accent-light: #E8EDF3;    /* 浅蓝背景 - Light blue background */

    /* 功能色 - Functional Colors */
    --color-success: #81B29A;         /* 柔和绿 - Soft green */
    --color-success-light: #E8F3ED;   /* 成功背景 */
    --color-warning: #F2CC8F;         /* 柔和黄 - Soft yellow */
    --color-warning-light: #FDF6E7;   /* 警告背景 */
    --color-error: #E07A5F;           /* 错误色 - Error (与主色同) */
    --color-error-light: #FCEEE9;     /* 错误背景 */
    --color-info: #3D5A80;            /* 信息色 - Info */
    --color-info-light: #E8EDF3;      /* 信息背景 */
    --color-selection-bg: #F4D5CE;

    /* ==========================================
       字体 - Typography
       ========================================== */

    /* 正文字体 - Body font (中文衬线优先) */
    --font-body:
        "Noto Serif SC",
        "Source Han Serif SC",
        "Source Han Serif",
        "思源宋体",
        "PingFang SC",
        Georgia,
        "Times New Roman",
        serif;

    /* 标题字体 - Heading font (无衬线) */
    --font-heading:
        "Noto Sans SC",
        "Source Han Sans SC",
        "思源黑体",
        "PingFang SC",
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;

    /* 等宽字体 - Monospace font */
    --font-mono:
        "JetBrains Mono",
        "Fira Code",
        "SF Mono",
        Menlo,
        Monaco,
        Consolas,
        monospace;

    /* 字号 - Font Sizes */
    --text-xs: 0.75rem;      /* 12px */
    --text-sm: 0.875rem;     /* 14px */
    --text-base: 1rem;       /* 16px */
    --text-lg: 1.125rem;     /* 18px */
    --text-xl: 1.25rem;      /* 20px */
    --text-2xl: 1.5rem;      /* 24px */
    --text-3xl: 1.875rem;    /* 30px */
    --text-4xl: 2.25rem;     /* 36px */
    --text-5xl: 3rem;        /* 48px */
    --text-6xl: 3.75rem;     /* 60px */

    /* 行高 - Line Heights */
    --leading-none: 1;
    --leading-tight: 1.25;
    --leading-snug: 1.375;
    --leading-normal: 1.5;
    --leading-relaxed: 1.625;
    --leading-loose: 1.8;

    /* 字重 - Font Weights */
    --font-light: 300;
    --font-normal: 400;
    --font-medium: 500;
    --font-semibold: 600;
    --font-bold: 700;

    /* ==========================================
       间距 - Spacing
       ========================================== */

    --space-0: 0;
    --space-1: 0.25rem;      /* 4px */
    --space-2: 0.5rem;       /* 8px */
    --space-3: 0.75rem;      /* 12px */
    --space-4: 1rem;         /* 16px */
    --space-5: 1.25rem;      /* 20px */
    --space-6: 1.5rem;       /* 24px */
    --space-8: 2rem;         /* 32px */
    --space-10: 2.5rem;      /* 40px */
    --space-12: 3rem;        /* 48px */
    --space-16: 4rem;        /* 64px */
    --space-20: 5rem;        /* 80px */
    --space-24: 6rem;        /* 96px */

    /* ==========================================
       圆角 - Border Radius
       ========================================== */

    --radius-none: 0;
    --radius-sm: 0.375rem;   /* 6px */
    --radius-md: 0.5rem;     /* 8px */
    --radius-lg: 0.75rem;    /* 12px */
    --radius-xl: 1rem;       /* 16px */
    --radius-2xl: 1.5rem;    /* 24px */
    --radius-full: 9999px;   /* 完全圆形 */

    /* ==========================================
       阴影 - Shadows (轻柔阴影)
       ========================================== */

    --shadow-none: none;
    --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.04);
    --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.06);
    --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.08);
    --shadow-xl: 0 12px 40px rgba(0, 0, 0, 0.1);

    /* 彩色阴影 - Colored shadows */
    --shadow-primary: 0 4px 14px rgba(224, 122, 95, 0.25);
    --shadow-accent: 0 4px 14px rgba(61, 90, 128, 0.2);

    /* ==========================================
       过渡动画 - Transitions (缓慢优雅)
       ========================================== */

    --transition-fast: 150ms ease;
    --transition-base: 250ms ease;
    --transition-slow: 350ms ease;
    --transition-slower: 500ms ease;

    /* 贝塞尔曲线 */
    --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
    --ease-out: cubic-bezier(0, 0, 0.2, 1);
    --ease-in: cubic-bezier(0.4, 0, 1, 1);

    /* ==========================================
       布局 - Layout
       ========================================== */

    --container-sm: 640px;
    --container-md: 768px;
    --container-lg: 1024px;
    --container-xl: 1200px;
    --container-2xl: 1400px;

    /* 内容最大宽度（阅读体验） */
    --content-width: 720px;
    --content-width-wide: 960px;

    /* ==========================================
       层级 - Z-Index
       ========================================== */

    --z-dropdown: 100;
    --z-sticky: 200;
    --z-fixed: 300;
    --z-modal-backdrop: 400;
    --z-modal: 500;
    --z-popover: 600;
    --z-tooltip: 700;
}

/* ==========================================
   深色模式变量
   Dark Mode Variables
   ========================================== */

:root[data-theme="dark"] {
    color-scheme: dark;

    --color-bg: #171311;
    --color-bg-subtle: #221c19;
    --color-bg-muted: #3A302A;
    --color-bg-dark: #0D0B0A;
    --color-bg-elevated: rgba(23, 19, 17, 0.92);
    --color-overlay: rgba(5, 4, 4, 0.72);

    --color-text: #F6EEE5;
    --color-text-secondary: #D7C6B8;
    --color-text-muted: #AE9E92;
    --color-text-inverse: #FFFFFF;

    --color-primary: #F09A7A;
    --color-primary-hover: #F6AD91;
    --color-primary-light: rgba(240, 154, 122, 0.16);
    --color-primary-dark: #D97C5C;

    --color-accent: #A9BFDE;
    --color-accent-hover: #C4D4EC;
    --color-accent-light: rgba(169, 191, 222, 0.16);

    --color-success: #97C7A5;
    --color-success-light: rgba(151, 199, 165, 0.16);
    --color-warning: #F1C78B;
    --color-warning-light: rgba(241, 199, 139, 0.16);
    --color-error: #F19986;
    --color-error-light: rgba(241, 153, 134, 0.16);
    --color-info: #A9BFDE;
    --color-info-light: rgba(169, 191, 222, 0.16);
    --color-selection-bg: rgba(240, 154, 122, 0.32);

    --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.22);
    --shadow-sm: 0 3px 8px rgba(0, 0, 0, 0.24);
    --shadow-md: 0 10px 24px rgba(0, 0, 0, 0.28);
    --shadow-lg: 0 16px 36px rgba(0, 0, 0, 0.3);
    --shadow-xl: 0 24px 56px rgba(0, 0, 0, 0.36);
    --shadow-primary: 0 10px 28px rgba(240, 154, 122, 0.18);
    --shadow-accent: 0 10px 28px rgba(169, 191, 222, 0.18);
}