/* ===== 企业级设计系统变量 ===== */
/* 参考: Salesforce Lightning Design System, Atlassian Design System */

:root {
    /* ===== 主色调系统 (Primary Colors) - 红鲸品牌色 ===== */
    --color-primary: #e53935;           /* 红鲸红 - 主要操作 */
    --color-primary-dark: #c62828;      /* 深红 - 悬停状态 */
    --color-primary-light: #ef5350;     /* 浅红 - 次要元素 */
    --color-primary-lighter: #ffcdd2;   /* 极浅红 - 背景 */

    /* ===== 中性色系统 (Neutral Colors) ===== */
    --color-neutral-900: #172B4D;       /* 深灰 - 主要文本 */
    --color-neutral-800: #253858;       /* 深灰 - 次要文本 */
    --color-neutral-700: #344563;       /* 中深灰 */
    --color-neutral-600: #505F79;       /* 中灰 */
    --color-neutral-500: #6B778C;       /* 标准灰 - 辅助文本 */
    --color-neutral-400: #8993A4;       /* 浅灰 */
    --color-neutral-300: #A5ADBA;       /* 极浅灰 */
    --color-neutral-200: #C1C7D0;       /* 边框色 */
    --color-neutral-100: #DFE1E6;       /* 分割线 */
    --color-neutral-50: #EBECF0;        /* 浅背景 */
    --color-neutral-20: #F4F5F7;        /* 页面背景 */
    --color-neutral-10: #FAFBFC;        /* 卡片背景 */

    /* ===== 语义色系统 (Semantic Colors) ===== */
    --color-success: #00875A;           /* 成功 - 深绿 */
    --color-success-light: #36B37E;     /* 成功 - 浅绿 */
    --color-success-bg: #E3FCEF;        /* 成功背景 */

    --color-warning: #FF8B00;           /* 警告 - 橙色 */
    --color-warning-light: #FFAB00;     /* 警告 - 浅橙 */
    --color-warning-bg: #FFF0E0;        /* 警告背景 */

    --color-danger: #DE350B;            /* 危险 - 红色 */
    --color-danger-light: #FF5630;      /* 危险 - 浅红 */
    --color-danger-bg: #FFEBE6;         /* 危险背景 */

    --color-info: #0065FF;              /* 信息 - 蓝色 */
    --color-info-light: #2684FF;        /* 信息 - 浅蓝 */
    --color-info-bg: #DEEBFF;           /* 信息背景 */

    /* ===== 导航栏专用色 ===== */
    --color-nav-bg: #2c2c2c;            /* 导航栏背景 - 深灰 */
    --color-nav-text: #FFFFFF;          /* 导航栏文字 */
    --color-nav-text-hover: #ef5350;    /* 导航栏文字悬停 - 浅红 */
    --color-nav-active: #e53935;        /* 导航栏激活项 - 红鲸红 */

    /* ===== 阴影系统 (Shadows) ===== */
    --shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --shadow-sm: 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);

    /* ===== 边框系统 (Borders) ===== */
    --border-width: 1px;
    --border-width-thick: 2px;
    --border-color: var(--color-neutral-200);
    --border-color-light: var(--color-neutral-100);
    --border-color-dark: var(--color-neutral-300);

    /* ===== 圆角系统 (Border Radius) ===== */
    --radius-sm: 3px;
    --radius-md: 6px;
    --radius-lg: 8px;
    --radius-xl: 12px;
    --radius-2xl: 16px;
    --radius-full: 9999px;

    /* ===== 间距系统 (Spacing) ===== */
    --spacing-xs: 4px;
    --spacing-sm: 8px;
    --spacing-md: 12px;
    --spacing-lg: 16px;
    --spacing-xl: 24px;
    --spacing-2xl: 32px;
    --spacing-3xl: 48px;
    --spacing-4xl: 64px;

    /* ===== 字体系统 (Typography) ===== */
    --font-family-base: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --font-family-mono: "SF Mono", Monaco, "Cascadia Code", "Roboto Mono", Consolas, "Courier New", monospace;

    /* 字号 */
    --font-size-xs: 11px;
    --font-size-sm: 12px;
    --font-size-base: 14px;
    --font-size-md: 16px;
    --font-size-lg: 18px;
    --font-size-xl: 20px;
    --font-size-2xl: 24px;
    --font-size-3xl: 30px;
    --font-size-4xl: 36px;

    /* 字重 */
    --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.75;

    /* ===== 过渡动画 (Transitions) ===== */
    --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-base: 300ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-slow: 500ms cubic-bezier(0.4, 0, 0.2, 1);

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

    /* ===== 表格专用变量 ===== */
    --table-header-bg: var(--color-neutral-50);
    --table-header-text: var(--color-neutral-800);
    --table-border-color: var(--color-neutral-100);
    --table-row-hover-bg: #F4F6F9;
    --table-row-stripe-bg: #FAFBFC;
    --table-row-selected-bg: #E6F2FF;

    /* ===== 卡片专用变量 ===== */
    --card-bg: #FFFFFF;
    --card-border: var(--border-color-light);
    --card-shadow: var(--shadow-sm);
    --card-shadow-hover: var(--shadow-md);
    --card-padding: var(--spacing-xl);

    /* ===== 按钮专用变量 ===== */
    --btn-padding-y: 8px;
    --btn-padding-x: 16px;
    --btn-padding-sm-y: 6px;
    --btn-padding-sm-x: 12px;
    --btn-padding-lg-y: 12px;
    --btn-padding-lg-x: 24px;

    /* ===== 输入框专用变量 ===== */
    --input-bg: #FFFFFF;
    --input-border: var(--color-neutral-200);
    --input-border-focus: var(--color-primary);
    --input-text: var(--color-neutral-900);
    --input-placeholder: var(--color-neutral-500);
    --input-padding-y: 8px;
    --input-padding-x: 12px;

    /* ===== 页面布局变量 ===== */
    --page-bg: var(--color-neutral-20);
    --content-max-width: 1440px;
    --sidebar-width: 240px;
    --navbar-height: 56px;
}

/* ===== 深色模式变量 (可选) ===== */
@media (prefers-color-scheme: dark) {
    :root {
        --color-neutral-900: #FAFBFC;
        --color-neutral-800: #F4F5F7;
        --color-neutral-700: #EBECF0;
        --color-neutral-600: #DFE1E6;
        --color-neutral-500: #C1C7D0;
        --color-neutral-400: #A5ADBA;
        --color-neutral-300: #8993A4;
        --color-neutral-200: #6B778C;
        --color-neutral-100: #505F79;
        --color-neutral-50: #344563;
        --color-neutral-20: #253858;
        --color-neutral-10: #172B4D;

        --page-bg: #1A1F2E;
        --card-bg: #253858;
        --table-header-bg: #1F2937;
        --table-row-hover-bg: #2D3748;
        --table-row-stripe-bg: #1F2937;
    }
}