/* ============================================
   GoodAI 全局主题根样式
   基于 REM 单位 + 根字体大小方案
   ============================================ */

/* ============================================
   根字体设置
   ============================================ */
html {
    font-size: 14px; /* 基准字体大小，修改此值可全局缩放 */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ============================================
   CSS 变量定义 - 亮色主题
   ============================================ */
:root {
    /* ===== 颜色系统 ===== */

    /* 主色 - 现代绿 */
    --color-primary: #22C55E;
    --color-primary-hover: #059669;
    --color-primary-light: #d1fae5;
    --color-primary-dark: #047857;

    /* 黑白灰系统 */
    --color-black: #000000;
    --color-white: #ffffff;
    --color-gray-50: #fafafa;
    --color-gray-100: #f5f5f5;
    --color-gray-200: #eeeeee;
    --color-gray-300: #e0e0e0;
    --color-gray-400: #bdbdbd;
    --color-gray-500: #9e9e9e;
    --color-gray-600: #757575;
    --color-gray-700: #616161;
    --color-gray-800: #424242;
    --color-gray-900: #212121;

    /* 状态色 */
    --color-success: #10b981;
    --color-success-light: #d1fae5;
    --color-success-dark: #047857;

    --color-warning: #f59e0b;
    --color-warning-light: #fef3c7;
    --color-warning-dark: #d97706;

    --color-error: #ef4444;
    --color-error-light: #fee2e2;
    --color-error-dark: #dc2626;

    /*--color-info: #3b82f6;
    */
    --color-info: #9e9e9e;
    --color-info-light: #fafafa;
    --color-info-dark: #9e9e9e;

    /* 背景色 */
    --color-bg-primary: #ffffff;
    --color-bg-secondary: #f5f5f5;
    --color-bg-tertiary: #fafafa;

    /* 文字色 */
    --color-text-primary: #212121;
    --color-text-secondary: #616161;
    --color-text-tertiary: #9e9e9e;
    --color-text-inverse: #ffffff;

    /* 边框色 */
    --color-border-primary: #e0e0e0;
    --color-border-secondary: #eeeeee;
    --color-border-focus: #10b981;

    /* 分隔线/装饰性边框专用色 */
    --color-divider: #e0e0e0;

    /* 图标专用色 */
    --color-icon: #757575;

    /* Sidebar 扁平化配色 - 浅色主题 */
    --sidebar-bg: #f6f6f6;
    --sidebar-bg-hover: #e8e8e8;
    --sidebar-bg-active: #d8d8d8;
    --sidebar-border: #e0e0e0;
    --sidebar-submenu-bg: #ececec;
    --sidebar-text: #333333;
    --sidebar-text-secondary: #666666;


    /* ===== 字号体系 (基于 16px) ===== */
    --font-size-xs: 0.75rem;      /* 12px */
    --font-size-sm: 0.875rem;     /* 14px */
    --font-size-base: 1rem;       /* 16px */
    --font-size-lg: 1.125rem;     /* 18px */
    --font-size-xl: 1.25rem;      /* 20px */
    --font-size-2xl: 1.5rem;      /* 24px */
    --font-size-3xl: 1.875rem;    /* 30px */
    --font-size-4xl: 2.25rem;     /* 36px */

    /* ===== 字体家族 ===== */
    --font-family-base: 'PingFang SC', 'Microsoft YaHei', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    --font-family-mono: 'Courier New', Consolas, Monaco, monospace;

    /* ===== 字重 ===== */
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;

    /* ===== 行高 ===== */
    --line-height-tight: 1.25;
    --line-height-normal: 1.5;
    --line-height-relaxed: 1.6;
    --line-height-loose: 2;

    /* ===== 间距系统 ===== */
    --spacing-0: 0;
    --spacing-1: 0.25rem;   /* 4px */
    --spacing-2: 0.5rem;    /* 8px */
    --spacing-3: 0.75rem;   /* 12px */
    --spacing-4: 1rem;      /* 16px */
    --spacing-5: 1.25rem;   /* 20px */
    --spacing-6: 1.5rem;    /* 24px */
    --spacing-8: 2rem;      /* 32px */
    --spacing-10: 2.5rem;   /* 40px */
    --spacing-12: 3rem;     /* 48px */
    --spacing-16: 4rem;     /* 64px */

    /* ===== 圆角 ===== */
    --radius-none: 0;
    --radius-sm: 0.25rem;   /* 4px */
    --radius-base: 0.5rem;  /* 8px */
    --radius-md: 0.625rem;  /* 10px */
    --radius-lg: 0.75rem;   /* 12px */
    --radius-xl: 1rem;      /* 16px */
    --radius-full: 9999px;

    /* ===== 阴影 ===== */
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --shadow-base: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    --shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);

    /* ===== 过渡效果 ===== */
    --transition-fast: 0.15s ease;
    --transition-base: 0.2s ease;
    --transition-slow: 0.3s ease;
    --transition-all: all 0.2s ease;

    /* ===== Z-index 层级 ===== */
    --z-dropdown: 1000;
    --z-sticky: 1020;
    --z-fixed: 1030;
    --z-modal-backdrop: 1040;
    --z-modal: 1050;
    --z-popover: 1060;
    --z-tooltip: 1070;

    /* ===== 容器宽度 ===== */
    --container-sm: 40rem;    /* 640px */
    --container-md: 48rem;    /* 768px */
    --container-lg: 64rem;    /* 1024px */
    --container-xl: 80rem;    /* 1280px */
    --container-2xl: 87.5rem; /* 1400px */
}

/* ============================================
   暗色主题预留
   ============================================ */
[data-theme="dark"] {
    /* 主色保持不变 */
    --color-primary: #10b981;
    --color-primary-hover: #34d399;

    /* 黑白反转 */
    --color-black: #ffffff;
    --color-white: #000000;

    /* 灰度系统反转 */
    --color-gray-50: #212121;
    --color-gray-100: #424242;
    --color-gray-200: #616161;
    --color-gray-300: #757575;
    --color-gray-400: #9e9e9e;
    --color-gray-500: #bdbdbd;
    --color-gray-600: #e0e0e0;
    --color-gray-700: #eeeeee;
    --color-gray-800: #f5f5f5;
    --color-gray-900: #fafafa;

    /* 背景色 */
    --color-bg-primary: #1a1a1a;
    --color-bg-secondary: #242424;
    --color-bg-tertiary: #2d2d2d;

    /* 文字色 */
    --color-text-primary: #fafafa;
    --color-text-secondary: #e0e0e0;
    --color-text-tertiary: #9e9e9e;
    --color-text-inverse: #212121;

    /* 边框色 */
    --color-border-primary: #424242;
    --color-border-secondary: #2d2d2d;
    --color-border-focus: #10b981;

    /* 分隔线/装饰性边框专用色 */
    --color-divider: #424242;

    /* 图标专用色 */
    --color-icon: #9e9e9e;
}

/* ============================================
   全局基础样式
   ============================================ */
html, body, div, span, article, section, nav, aside,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, code, em, img, small, strong, sub, sup,
ul, ol, li, form, label, input, button, select, textarea,
table, thead, tbody, tr, th, td {
    margin: 0;
    padding: 0;
}

/* 使用继承方式设置box-sizing，减少通配符性能影响 */
html {
    box-sizing: border-box;
}

*, *::before, *::after {
    box-sizing: inherit;
}

body {
    font-family: var(--font-family-base);
    font-size: var(--font-size-base);
    line-height: var(--line-height-normal);
    color: var(--color-text-primary);
    background-color: var(--color-bg-secondary);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ============================================
   响应式断点（用于媒体查询参考）
   ============================================ */
/*
@media (min-width: 640px)  { ... }   sm
@media (min-width: 768px)  { ... }   md
@media (min-width: 1024px) { ... }   lg
@media (min-width: 1280px) { ... }   xl
@media (min-width: 1536px) { ... }   2xl
*/