// ============================================================
// 设计令牌（Design Tokens）· SCSS 变量
// 品牌色取自 src/assets/logo/OPO_Logo.png 圆环青 #0E768F
// 说明见：方案-前端界面视觉优化方案.md
// 约定：业务样式一律引用这里的变量，禁止再写裸色值
// ============================================================

// ---------- 品牌色（青） ----------
$opo-primary:          #0E768F;
$opo-primary-hover:    #0D6A81;
$opo-primary-active:   #0B5E72;
$opo-primary-light-3:  #569FB1;
$opo-primary-light-5:  #87BBC7;
$opo-primary-light-7:  #B7D6DD;
$opo-primary-light-8:  #CFE4E9;
$opo-primary-light-9:  #E7F1F4;
$opo-primary-light-95: #F3F8F9;
$opo-primary-dark-2:   #0B5E72;

// ---------- 语义色 ----------
$opo-success:       #67C23A;
$opo-success-light: #F0F9EB;
$opo-warning:       #E6A23C;
$opo-warning-light: #FDF6EC;
$opo-danger:        #CD1D4E;
$opo-danger-light:  #FBEBEF;
$opo-info:          #909399;
$opo-info-light:    #F4F4F5;

// ---------- 中性色 ----------
$opo-text-primary:     #1F2937;
$opo-text-regular:     #4B5563;
$opo-text-secondary:   #6B7280;
$opo-text-placeholder: #9CA3AF;
$opo-border-base:      #E5E7EB;
$opo-border-light:     #F0F2F5;
$opo-border-lighter:   #F5F7FA;
$opo-bg-page:          #F5F7FA;
$opo-bg-card:          #FFFFFF;
$opo-bg-hover:         #F5F9FD;
$opo-bg-stripe:        #FAFBFC;
$opo-bg-thead:         #F5F7FA;

// ---------- 表格框线（比通用边框更深，便于看清分列/分行） ----------
$opo-table-border:        #C8CFD8;
$opo-table-border-strong: #B7C0CC;

// ---------- 侧边栏（与品牌青同族） ----------
$opo-sidebar-bg:          #0A4655;
$opo-sidebar-sub-bg:      #083B47;
$opo-sidebar-hover:       rgba(14, 118, 143, 0.28);
$opo-sidebar-text:        rgba(255, 255, 255, 0.72);
$opo-sidebar-text-active: #FFFFFF;

// ---------- 字号（2026-10-22 整体上调一号：正文 14→16） ----------
$opo-font-size-display: 34px;
$opo-font-size-h1:      26px;
$opo-font-size-h2:      20px;
$opo-font-size-lg:      18px;
$opo-font-size-base:    16px;
$opo-font-size-sm:      14px;
$opo-font-size-xs:      13px;
$opo-font-size-menu:    16px;  // 侧边栏菜单（2026-10-22 由 18px 回调一号）

// ---------- 行高 ----------
$opo-line-height-base:    22px;
$opo-line-height-heading: 1.3;

// ---------- 字体 ----------
// 注意：不要用 -apple-system / BlinkMacSystemFont 打头——Windows 上 Chrome 会解析成 Segoe UI，
// 导致数字/英文走 Segoe UI（比中文细、显小），中文回退微软雅黑，同一行里字号观感不一致。
// 这里按"平台有则用、没有则退到微软雅黑"的顺序，保证中英文同族。
$opo-font-family-base:   "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑",
                         "Helvetica Neue", Arial, sans-serif;
$opo-font-family-number: "DIN Alternate", "SF Mono", "Roboto Mono", Consolas, "Courier New", monospace;

// ---------- 间距（8 点栅格） ----------
$opo-space-1: 4px;
$opo-space-2: 8px;
$opo-space-3: 12px;
$opo-space-4: 16px;
$opo-space-5: 24px;
$opo-space-6: 32px;

// ---------- 圆角 ----------
$opo-radius-sm:   2px;
$opo-radius-base: 4px;
$opo-radius-lg:   8px;
$opo-radius-pill: 999px;

// ---------- 阴影 ----------
$opo-shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.06);
$opo-shadow-md: 0 4px 12px rgba(16, 24, 40, 0.08);
$opo-shadow-lg: 0 12px 32px rgba(16, 24, 40, 0.12);

// ---------- 控件高度 ----------
$opo-control-height-small:  32px;
$opo-control-height-base:   36px;