/**
 * mylost.test - Design Tokens (CSS Custom Properties)
 *
 * 视觉规范从老 EC_JPDFS 失物找回模块抽出 (2026-05-26)
 * 风格：Apple 极简（系统字体 + 离白背景 + 毛玻璃 + 微妙阴影）
 * 主色：Apple 蓝 #0071E3
 *
 * 用法：
 *   color: var(--text-dark);
 *   background: var(--bg-card);
 *   border-radius: var(--radius-md);
 *   box-shadow: var(--shadow);
 *
 * 同时覆盖了 Bootstrap 5 主要变量（--bs-*），所以 .btn-primary、.text-primary
 * 等 BS 类自动用我们的主色。
 */

:root {
    /* ===================== 颜色系统 ===================== */
    /* 品牌主色 */
    --primary:       #0071E3;
    --primary-hover: #0077ED;
    --primary-light: #EAF2FF;
    --primary-tint:  rgba(0, 113, 227, 0.12);

    /* 辅助色 */
    --secondary:     #07C160;   /* 微信绿（第三方登录） */
    --success:       #07C160;
    --warning:       #E0203C;
    --danger:        #E0203C;
    --info:          #0071E3;

    /* 文字色阶 */
    --text-dark:     #1D1D1F;   /* 主文本 / 标题 */
    --text-normal:   #424245;   /* 导航 / 常态正文 */
    --text-muted:    #6E6E73;   /* 辅助文本 */
    --text-light:    #86868B;   /* 浅灰文本 / 标签 */
    --text-pale:     #9A9AA0;   /* 极浅灰 / placeholder */
    --text-border:   #B0B0B5;

    /* 背景色 */
    --bg-page:        #F5F5F7;  /* 整体页面 */
    --bg-card:        #FFFFFF;  /* 卡片 / 表单容器 */
    --bg-input:       #F5F5F7;  /* 输入框默认 */
    --bg-input-focus: #FFFFFF;  /* 输入框聚焦 */
    --bg-hover:       #F2F4F7;  /* hover */
    --bg-row-hover:   #FAFAFA;  /* 表格行 hover */
    --bg-highlight:   #F0F4FF;  /* 高亮 / 菜单激活 */
    --bg-img-panel:   #9ED7FF;  /* 登录页左侧图片面板 */

    /* 边框 / 分割线 */
    --border-color:   #F0F0F2;
    --border-default: #ECECEF;
    --border-input:   #E5E5EA;
    --border-icon:    #D2D2D7;

    /* ===================== 字体 ===================== */
    --font-family-base: -apple-system, BlinkMacSystemFont, "SF Pro Text",
                        "PingFang SC", "Hiragino Sans", "Helvetica Neue",
                        Arial, sans-serif;

    --font-size-xs:   12px;
    --font-size-sm:   13px;
    --font-size-base: 15px;
    --font-size-lg:   16px;
    --font-size-xl:   20px;
    --font-size-2xl:  26px;
    --font-size-3xl:  34px;

    --line-height-base:  1.5;
    --line-height-tight: 1.4;

    /* ===================== 间距体系 ===================== */
    --space-0:  0;
    --space-1:  4px;
    --space-2:  6px;
    --space-3:  8px;
    --space-4:  12px;
    --space-5:  14px;
    --space-6:  16px;
    --space-7:  18px;
    --space-8:  20px;
    --space-10: 24px;
    --space-14: 32px;
    --space-18: 40px;

    /* ===================== 圆角 ===================== */
    --radius-sm:  8px;
    --radius:     10px;
    --radius-md:  12px;
    --radius-lg:  14px;
    --radius-xl:  16px;
    --radius-2xl: 18px;   /* 主卡片 */
    --radius-3xl: 22px;   /* 登录卡片 */

    /* ===================== 阴影 ===================== */
    --shadow-sm:    0 6px  20px rgba(17, 24, 39, 0.12);
    --shadow:       0 8px  28px rgba(17, 24, 39, 0.05);
    --shadow-lg:    0 12px 32px rgba(17, 24, 39, 0.12);
    --shadow-xl:    0 18px 50px rgba(17, 24, 39, 0.06);
    --shadow-2xl:   0 18px 50px rgba(17, 24, 39, 0.08);
    --shadow-btn:   0 8px  20px rgba(0, 113, 227, 0.28);
    --shadow-backdrop: rgba(0, 0, 0, 0.3);

    /* ===================== 按钮 ===================== */
    --btn-padding-y:     12px;
    --btn-padding-x:     16px;
    --btn-padding-y-lg:  15px;
    --btn-padding-x-lg:  32px;
    --btn-font-size:     16px;
    --btn-font-weight:   600;
    --btn-radius:        12px;
    --btn-height:        50px;
    --btn-height-sm:     38px;

    /* ===================== 动画 ===================== */
    --transition-fast: 0.15s ease;
    --transition-base: 0.2s  ease;
    --transition-slow: 0.3s  ease;

    /* ===================== 覆盖 Bootstrap 5 内部变量 ===================== */
    /* 让 .btn-primary / .text-primary / .bg-primary 等自动用我们的色 */
    --bs-primary:           var(--primary);
    --bs-primary-rgb:       0, 113, 227;
    --bs-success:           var(--success);
    --bs-success-rgb:       7, 193, 96;
    --bs-danger:            var(--danger);
    --bs-danger-rgb:        224, 32, 60;
    --bs-warning:           var(--warning);
    --bs-info:              var(--info);
    --bs-light:             var(--bg-page);
    --bs-dark:              var(--text-dark);
    --bs-body-bg:           var(--bg-page);
    --bs-body-color:        var(--text-dark);
    --bs-body-font-family:  var(--font-family-base);
    --bs-body-font-size:    var(--font-size-base);
    --bs-body-line-height:  var(--line-height-base);
    --bs-link-color:        var(--primary);
    --bs-link-color-rgb:    0, 113, 227;
    --bs-link-hover-color:  var(--primary-hover);
    --bs-border-color:      var(--border-color);
    --bs-border-radius:     var(--radius-md);
    --bs-border-radius-lg:  var(--radius-lg);
    --bs-border-radius-sm:  var(--radius-sm);
    --bs-border-radius-xl:  var(--radius-xl);
}