﻿/**
 * BkERP主题系统 v3.0
 * 基于 Material Design 3 规范
 * 支持多主题切换：经典白、天空蓝、暗夜蓝、青春绿、温暖橙、简约灰
 */

/* 引入颜色定义 */
@import url('color.css');

/* =========================== */
/*       默认主题 - 经典白       */
/*   专业、简洁、适合商务使用     */
/* =========================== */

:root {
    font-size: 62.5%; /* 1rem = 10px */
    
    /* 字体系统 */
    --bkerp-font-family: "Microsoft YaHei", "PingFang SC", "Hiragino Sans GB", sans-serif;
    --bkerp-font-size-base: 1.4rem;
    --bkerp-font-size-sm: 1.2rem;
    --bkerp-font-size-smr: 1rem;
    --bkerp-font-size-lg: 1.6rem;
    --bkerp-font-size-lgr: 1.8rem;
    
    /* 语义化状态颜色 */
    --bkerp-success: var(--green-500);
    --bkerp-warning: var(--yellow-600);
    --bkerp-error: var(--red-500);
    --bkerp-info: var(--blue-500);
    
    /* 品牌颜色 - 更专业的配色 */
    --bkerp-primary: var(--grey-700);
    --bkerp-secondary: var(--grey-600);
    --bkerp-accent: var(--blue-600);
    
    /* 表面颜色 */
    --bkerp-surface: var(--white-50);
    --bkerp-surface-variant: var(--white-100);
    --bkerp-on-surface: var(--grey-800);
    --bkerp-on-surface-variant: var(--grey-600);
    
    /* 输入框颜色 */
    --bkerp-input-bg: var(--white-50);
    --bkerp-input-border-color: var(--grey-300);
    --bkerp-input-border-color-focus: var(--blue-600);
    --bkerp-input-shadow: var(--shadow-2);
    
    /* 导航区域颜色 */
    --bkerp-nav-bg: var(--white-100);
    
    /* 背景和文字 */
    --bkerp-bg-gradient: linear-gradient(to bottom, var(--white-50), var(--white-200));
    --bkerp-text-color: var(--grey-800);
    
    /* 卡片相关颜色 */
    --bkerp-card-bg-gradient: linear-gradient(to bottom, var(--white-50), var(--white-100));
    --bkerp-card-border-color: var(--grey-200);
    --bkerp-card-text-color: var(--grey-800);
    --bkerp-card-hover-bg-gradient: linear-gradient(to bottom, var(--grey-50), var(--grey-100));
    --bkerp-card-shadow: var(--shadow-2);
    
    /* 按钮颜色 */
    --bkerp-btn-primary-bg: var(--grey-700);
    --bkerp-btn-secondary-bg: var(--grey-500);
    --bkerp-btn-warning-bg: var(--yellow-600);
    --bkerp-btn-danger-bg: var(--red-500);
    --bkerp-btn-text: var(--white-50);
    
    /* 上下文菜单颜色 */
    --bkerp-menu-bg-gradient: linear-gradient(to bottom, var(--white-50), var(--grey-100));
    --bkerp-menu-text-color: var(--grey-800);
    --bkerp-menu-shadow: var(--shadow-3);
    
    /* 可点击文字颜色 */
    --bkerp-link-text-color: var(--blue-600);
    --bkerp-link-text-hover-color: var(--blue-800);
    --bkerp-link-text-hover-shadow: 0 0 2px var(--blue-600);
    
    /* 滚动条颜色 */
    --bkerp-scrollbar-track-color: var(--grey-100);
    --bkerp-scrollbar-thumb-color: var(--grey-400);
    --bkerp-scrollbar-thumb-hover-color: var(--grey-500);
    
    /* 标题和禁用颜色 */
    --bkerp-heading-color: var(--grey-700);
    --bkerp-disabled-color: var(--grey-300);
    
    /* 焦点和选中状态 */
    --bkerp-focus-outline: 2px solid var(--blue-600);
    --bkerp-focus-shadow: 0 0 0 3px rgba(30, 136, 229, 0.2);
    --bkerp-selection-bg: var(--blue-100);
    --bkerp-selection-text: var(--grey-800);
    
    /* 加载和占位符颜色 */
    --bkerp-skeleton-bg: var(--grey-100);
    --bkerp-skeleton-shimmer: var(--grey-200);
    --bkerp-placeholder-text: var(--grey-400);
    
    /* 表格颜色 */
    --bkerp-table-header-bg: var(--grey-50);
    --bkerp-table-row-even-bg: var(--white-50);
    --bkerp-table-row-odd-bg: var(--grey-50);
    --bkerp-table-row-hover-bg: var(--blue-50);
    --bkerp-table-border-color: var(--grey-200);
}

/* =========================== */
/*       天空蓝主题            */
/*   清新、活力、适合创意工作     */
/* =========================== */

.skyblue {
    /* 背景和文字 */
    --bkerp-bg-gradient: linear-gradient(to bottom, var(--light-blue-50), var(--light-blue-100));
    --bkerp-text-color: var(--grey-800);
    
    /* 表面颜色 */
    --bkerp-surface: var(--light-blue-50);
    --bkerp-surface-variant: var(--light-blue-100);
    --bkerp-on-surface: var(--grey-800);
    --bkerp-on-surface-variant: var(--grey-700);
    
    /* 品牌颜色 */
    --bkerp-primary: var(--light-blue-600);
    --bkerp-secondary: var(--blue-500);
    --bkerp-accent: var(--orange-500);
    
    /* 输入框 */
    --bkerp-input-bg: var(--white-50);
    --bkerp-input-border-color: var(--light-blue-200);
    --bkerp-input-border-color-focus: var(--light-blue-600);
    --bkerp-input-shadow: var(--shadow-3);
    
    /* 导航区域 */
    --bkerp-nav-bg: var(--light-blue-200);
    
    /* 卡片相关 */
    --bkerp-card-bg-gradient: linear-gradient(to bottom, var(--white-50), var(--light-blue-100));
    --bkerp-card-border-color: var(--light-blue-200);
    --bkerp-card-text-color: var(--grey-800);
    --bkerp-card-hover-bg-gradient: linear-gradient(to bottom, var(--light-blue-200), var(--light-blue-400));
    --bkerp-card-shadow: var(--shadow-3);
    
    /* 按钮 */
    --bkerp-btn-primary-bg: var(--light-blue-600);
    --bkerp-btn-secondary-bg: var(--light-blue-500);
    --bkerp-btn-warning-bg: var(--orange-500);
    --bkerp-btn-danger-bg: var(--red-500);
    --bkerp-btn-text: var(--white-50);
    
    /* 上下文菜单 */
    --bkerp-menu-bg-gradient: linear-gradient(to bottom, var(--light-blue-300), var(--light-blue-500));
    --bkerp-menu-text-color: var(--white-50);
    --bkerp-menu-shadow: var(--shadow-3);
    
    /* 可点击文字 */
    --bkerp-link-text-color: var(--light-blue-700);
    --bkerp-link-text-hover-color: var(--orange-600);
    --bkerp-link-text-hover-shadow: 0 0 2px var(--light-blue-600);
    
    /* 滚动条 */
    --bkerp-scrollbar-track-color: var(--light-blue-100);
    --bkerp-scrollbar-thumb-color: var(--light-blue-300);
    --bkerp-scrollbar-thumb-hover-color: var(--light-blue-400);
    
    /* 标题和禁用色 */
    --bkerp-heading-color: var(--light-blue-700);
    --bkerp-disabled-color: var(--light-blue-200);
    
    /* 焦点和选中状态 */
    --bkerp-focus-outline: 2px solid var(--light-blue-600);
    --bkerp-focus-shadow: 0 0 0 3px rgba(3, 169, 244, 0.3);
    --bkerp-selection-bg: var(--light-blue-200);
    --bkerp-selection-text: var(--grey-800);
    
    /* 加载和占位符颜色 */
    --bkerp-skeleton-bg: var(--light-blue-100);
    --bkerp-skeleton-shimmer: var(--light-blue-200);
    --bkerp-placeholder-text: var(--grey-500);
    
    /* 表格颜色 */
    --bkerp-table-header-bg: var(--light-blue-100);
    --bkerp-table-row-even-bg: var(--white-50);
    --bkerp-table-row-odd-bg: var(--light-blue-50);
    --bkerp-table-row-hover-bg: var(--light-blue-100);
    --bkerp-table-border-color: var(--light-blue-200);
}

/* =========================== */
/*       暗夜蓝主题            */
/* =========================== */

.darkblue {
    /* 背景和文字 */
    --bkerp-bg-gradient: linear-gradient(to bottom, var(--darkblue-800), var(--darkblue-600));
    --bkerp-text-color: var(--dark-text-primary);
    
    /* 表面颜色 */
    --bkerp-surface: var(--darkblue-800);
    --bkerp-surface-variant: var(--darkblue-700);
    --bkerp-on-surface: var(--dark-text-primary);
    --bkerp-on-surface-variant: var(--dark-text-secondary);
    
    /* 输入框 */
    --bkerp-input-bg: var(--darkblue-700);
    --bkerp-input-border-color: var(--darkblue-500);
    --bkerp-input-border-color-focus: var(--orange-500);
    --bkerp-input-shadow: var(--dark-shadow-1);
    
    /* 导航区域 */
    --bkerp-nav-bg: var(--darkblue-900);
    
    /* 卡片相关 */
    --bkerp-card-bg-gradient: linear-gradient(to bottom, var(--darkblue-700), var(--darkblue-600));
    --bkerp-card-border-color: var(--darkblue-500);
    --bkerp-card-text-color: var(--dark-text-secondary);
    --bkerp-card-hover-bg-gradient: linear-gradient(to bottom, var(--darkblue-500), var(--darkblue-400));
    --bkerp-card-shadow: var(--dark-shadow-1);
    
    /* 按钮 */
    --bkerp-btn-primary-bg: var(--darkblue-500);
    --bkerp-btn-secondary-bg: var(--darkblue-400);
    --bkerp-btn-warning-bg: var(--orange-600);
    --bkerp-btn-danger-bg: var(--red-600);
    --bkerp-btn-text: var(--dark-text-primary);
    
    /* 上下文菜单 */
    --bkerp-menu-bg-gradient: linear-gradient(to bottom, var(--darkblue-600), var(--darkblue-500));
    --bkerp-menu-text-color: var(--dark-text-primary);
    --bkerp-menu-shadow: var(--dark-shadow-1);
    
    /* 可点击文字 */
    --bkerp-link-text-color: var(--teal-300);   
    --bkerp-link-text-hover-color: var(--orange-400);
    --bkerp-link-text-hover-shadow: 0 0 2px var(--darkblue-900);
    
    /* 滚动条 */
    --bkerp-scrollbar-track-color: var(--darkblue-900);
    --bkerp-scrollbar-thumb-color: var(--darkblue-600);
    --bkerp-scrollbar-thumb-hover-color: var(--darkblue-500);
    
    /* 标题和禁用色 */
    --bkerp-heading-color: var(--dark-text-secondary);
    --bkerp-disabled-color: var(--dark-text-disabled);
    
    /* 焦点和选中状态 */
    --bkerp-focus-outline: 2px solid var(--orange-400);
    --bkerp-focus-shadow: 0 0 0 3px rgba(255, 167, 38, 0.3);
    --bkerp-selection-bg: var(--darkblue-500);
    --bkerp-selection-text: var(--dark-text-primary);
    
    /* 加载和占位符颜色 */
    --bkerp-skeleton-bg: var(--darkblue-700);
    --bkerp-skeleton-shimmer: var(--darkblue-600);
    --bkerp-placeholder-text: var(--dark-text-disabled);
    
    /* 表格颜色 */
    --bkerp-table-header-bg: var(--darkblue-700);
    --bkerp-table-row-even-bg: var(--darkblue-800);
    --bkerp-table-row-odd-bg: var(--darkblue-850);
    --bkerp-table-row-hover-bg: var(--darkblue-600);
    --bkerp-table-border-color: var(--darkblue-500);
}

/* =========================== */
/*       青春绿主题            */
/* =========================== */

.teal {
    /* 背景和文字 */
    --bkerp-bg-gradient: linear-gradient(to bottom, var(--teal-50), var(--teal-100));
    --bkerp-text-color: var(--grey-800);
    
    /* 表面颜色 */
    --bkerp-surface: var(--teal-50);
    --bkerp-surface-variant: var(--teal-100);
    --bkerp-on-surface: var(--grey-800);
    --bkerp-on-surface-variant: var(--grey-700);
    
    /* 输入框 */
    --bkerp-input-bg: var(--white-50);
    --bkerp-input-border-color: var(--teal-200);
    --bkerp-input-border-color-focus: var(--teal-500);
    --bkerp-input-shadow: var(--shadow-3);
    
    /* 导航区域 */
    --bkerp-nav-bg: var(--teal-200);
    
    /* 卡片相关 */
    --bkerp-card-bg-gradient: linear-gradient(to bottom, var(--white-50), var(--teal-100));
    --bkerp-card-border-color: var(--teal-200);
    --bkerp-card-text-color: var(--grey-800);
    --bkerp-card-hover-bg-gradient: linear-gradient(to bottom, var(--teal-200), var(--teal-400));
    --bkerp-card-shadow: var(--shadow-3);
    
    /* 按钮 */
    --bkerp-btn-primary-bg: var(--teal-500);
    --bkerp-btn-secondary-bg: var(--teal-400);
    --bkerp-btn-warning-bg: var(--orange-500);
    --bkerp-btn-danger-bg: var(--red-500);
    --bkerp-btn-text: var(--white-50);
    
    /* 上下文菜单 */
    --bkerp-menu-bg-gradient: linear-gradient(to bottom, var(--teal-300), var(--teal-500));
    --bkerp-menu-text-color: var(--white-50);
    --bkerp-menu-shadow: var(--shadow-3);
    
    /* 可点击文字 */
    --bkerp-link-text-color: var(--teal-600);
    --bkerp-link-text-hover-color: var(--teal-800);
    --bkerp-link-text-hover-shadow: 0 0 2px var(--teal-500);
    
    /* 滚动条 */
    --bkerp-scrollbar-track-color: var(--teal-100);
    --bkerp-scrollbar-thumb-color: var(--teal-300);
    --bkerp-scrollbar-thumb-hover-color: var(--teal-400);
    
    /* 标题和禁用色 */
    --bkerp-heading-color: var(--teal-700);
    --bkerp-disabled-color: var(--teal-200);
    
    /* 焦点和选中状态 */
    --bkerp-focus-outline: 2px solid var(--teal-500);
    --bkerp-focus-shadow: 0 0 0 3px rgba(0, 150, 136, 0.3);
    --bkerp-selection-bg: var(--teal-200);
    --bkerp-selection-text: var(--grey-800);
    
    /* 加载和占位符颜色 */
    --bkerp-skeleton-bg: var(--teal-100);
    --bkerp-skeleton-shimmer: var(--teal-200);
    --bkerp-placeholder-text: var(--grey-500);
    
    /* 表格颜色 */
    --bkerp-table-header-bg: var(--teal-100);
    --bkerp-table-row-even-bg: var(--white-50);
    --bkerp-table-row-odd-bg: var(--teal-50);
    --bkerp-table-row-hover-bg: var(--teal-100);
    --bkerp-table-border-color: var(--teal-200);
}

/* =========================== */
/*       温暖橙主题            */
/* =========================== */

.warm {
    /* 背景和文字 */
    --bkerp-bg-gradient: linear-gradient(to bottom, var(--orange-50), var(--orange-100));
    --bkerp-text-color: var(--grey-800);
    
    /* 表面颜色 */
    --bkerp-surface: var(--orange-50);
    --bkerp-surface-variant: var(--orange-100);
    --bkerp-on-surface: var(--grey-800);
    --bkerp-on-surface-variant: var(--grey-700);
    
    /* 输入框 */
    --bkerp-input-bg: var(--white-50);
    --bkerp-input-border-color: var(--orange-200);
    --bkerp-input-border-color-focus: var(--orange-500);
    --bkerp-input-shadow: var(--shadow-3);
    
    /* 导航区域 */
    --bkerp-nav-bg: var(--orange-200);
    
    /* 卡片相关 */
    --bkerp-card-bg-gradient: linear-gradient(to bottom, var(--white-50), var(--orange-100));
    --bkerp-card-border-color: var(--orange-200);
    --bkerp-card-text-color: var(--grey-800);
    --bkerp-card-hover-bg-gradient: linear-gradient(to bottom, var(--orange-200), var(--orange-400));
    --bkerp-card-shadow: var(--shadow-3);
    
    /* 按钮 */
    --bkerp-btn-primary-bg: var(--orange-500);
    --bkerp-btn-secondary-bg: var(--orange-400);
    --bkerp-btn-warning-bg: var(--yellow-600);
    --bkerp-btn-danger-bg: var(--red-500);
    --bkerp-btn-text: var(--white-50);
    
    /* 上下文菜单 */
    --bkerp-menu-bg-gradient: linear-gradient(to bottom, var(--orange-300), var(--orange-500));
    --bkerp-menu-text-color: var(--white-50);
    --bkerp-menu-shadow: var(--shadow-3);
    
    /* 可点击文字 */
    --bkerp-link-text-color: var(--orange-600);
    --bkerp-link-text-hover-color: var(--orange-800);
    --bkerp-link-text-hover-shadow: 0 0 2px var(--orange-500);
    
    /* 滚动条 */
    --bkerp-scrollbar-track-color: var(--orange-100);
    --bkerp-scrollbar-thumb-color: var(--orange-300);
    --bkerp-scrollbar-thumb-hover-color: var(--orange-400);
    
    /* 标题和禁用色 */
    --bkerp-heading-color: var(--orange-700);
    --bkerp-disabled-color: var(--orange-200);
    
    /* 焦点和选中状态 */
    --bkerp-focus-outline: 2px solid var(--orange-500);
    --bkerp-focus-shadow: 0 0 0 3px rgba(255, 152, 0, 0.3);
    --bkerp-selection-bg: var(--orange-200);
    --bkerp-selection-text: var(--grey-800);
    
    /* 加载和占位符颜色 */
    --bkerp-skeleton-bg: var(--orange-100);
    --bkerp-skeleton-shimmer: var(--orange-200);
    --bkerp-placeholder-text: var(--grey-500);
    
    /* 表格颜色 */
    --bkerp-table-header-bg: var(--orange-100);
    --bkerp-table-row-even-bg: var(--white-50);
    --bkerp-table-row-odd-bg: var(--orange-50);
    --bkerp-table-row-hover-bg: var(--orange-100);
    --bkerp-table-border-color: var(--orange-200);
}

/* =========================== */
/*       简约灰主题            */
/* =========================== */

.grey {
    /* 背景和文字 */
    --bkerp-bg-gradient: linear-gradient(to bottom, var(--grey-100), var(--grey-200));
    --bkerp-text-color: var(--grey-800);
    
    /* 表面颜色 */
    --bkerp-surface: var(--grey-50);
    --bkerp-surface-variant: var(--grey-100);
    --bkerp-on-surface: var(--grey-800);
    --bkerp-on-surface-variant: var(--grey-700);
    
    /* 输入框 */
    --bkerp-input-bg: var(--white-50);
    --bkerp-input-border-color: var(--grey-300);
    --bkerp-input-border-color-focus: var(--grey-600);
    --bkerp-input-shadow: var(--shadow-3);
    
    /* 导航区域 */
    --bkerp-nav-bg: var(--grey-300);
    
    /* 卡片相关 */
    --bkerp-card-bg-gradient: linear-gradient(to bottom, var(--white-50), var(--grey-100));
    --bkerp-card-border-color: var(--grey-300);
    --bkerp-card-text-color: var(--grey-800);
    --bkerp-card-hover-bg-gradient: linear-gradient(to bottom, var(--grey-200), var(--grey-400));
    --bkerp-card-shadow: var(--shadow-3);
    
    /* 按钮 */
    --bkerp-btn-primary-bg: var(--grey-600);
    --bkerp-btn-secondary-bg: var(--grey-500);
    --bkerp-btn-warning-bg: var(--orange-500);
    --bkerp-btn-danger-bg: var(--red-500);
    --bkerp-btn-text: var(--white-50);
    
    /* 上下文菜单 */
    --bkerp-menu-bg-gradient: linear-gradient(to bottom, var(--grey-400), var(--grey-600));
    --bkerp-menu-text-color: var(--white-50);
    --bkerp-menu-shadow: var(--shadow-3);
    
    /* 可点击文字 */
    --bkerp-link-text-color: var(--grey-700);
    --bkerp-link-text-hover-color: var(--grey-900);
    --bkerp-link-text-hover-shadow: 0 0 2px var(--grey-600);
    
    /* 滚动条 */
    --bkerp-scrollbar-track-color: var(--grey-200);
    --bkerp-scrollbar-thumb-color: var(--grey-400);
    --bkerp-scrollbar-thumb-hover-color: var(--grey-500);
    
    /* 标题和禁用色 */
    --bkerp-heading-color: var(--grey-700);
    --bkerp-disabled-color: var(--grey-400);
    
    /* 焦点和选中状态 */
    --bkerp-focus-outline: 2px solid var(--grey-600);
    --bkerp-focus-shadow: 0 0 0 3px rgba(117, 117, 117, 0.3);
    --bkerp-selection-bg: var(--grey-300);
    --bkerp-selection-text: var(--grey-800);
    
    /* 加载和占位符颜色 */
    --bkerp-skeleton-bg: var(--grey-200);
    --bkerp-skeleton-shimmer: var(--grey-300);
    --bkerp-placeholder-text: var(--grey-500);
    
    /* 表格颜色 */
    --bkerp-table-header-bg: var(--grey-200);
    --bkerp-table-row-even-bg: var(--white-50);
    --bkerp-table-row-odd-bg: var(--grey-50);
    --bkerp-table-row-hover-bg: var(--grey-100);
    --bkerp-table-border-color: var(--grey-300);
}