/* ═══════════════════════════════════════════
   CheckNow Design System — Design Tokens
   全站唯一颜色、间距、字体变量源
   ═══════════════════════════════════════════ */

:root {
    /* ── 品牌色阶 ── */
    --cn-navy:       #0B192C;   /* 主色 · 正文 · 深色背景 */
    --cn-navy-900:   #0B192C;
    --cn-navy-800:   #162B45;   /* 浅一级 */
    --cn-navy-700:   #223A5A;   /* 浅二级 */
    --cn-primary-dark:   #060F1E;  /* 最深背景 (footer / overlay) */
    --cn-gold:       #D4AF37;   /* 品牌金 */
    --cn-gold-500:   #D4AF37;
    --cn-gold-400:   #e5c04a;   /* 金色 hover */
    --cn-gold-300:   #F1D592;   /* 浅金 (avatar · 眉标) */

    /* ── 语义色（指向色阶，不存真实值）── */
    --cn-primary:        var(--cn-navy, #162943);
    --cn-primary-light:  #E8EEF8;   /* 浅蓝标签背景 */
    --cn-accent:         var(--cn-gold);
    --cn-accent-dark:    #C9A84C;   /* 深金 */
    --cn-accent-hover:   var(--cn-gold-400);
    --cn-accent-light:   var(--cn-gold-300);
    --cn-accent-pale:    #FFFDF5;   /* 极浅金背景 */

    /* ── 表面色 ── */
    --cn-surface:        #FFFFFF;
    --cn-surface-alt:    #F8FAFC;
    --cn-surface-raised: #FFFFFF;
    --cn-surface-soft:   #f0f2f5;   /* 软灰背景 (新增) */
    --cn-surface-hover:  #f8f9fb;   /* 表格行 hover (新增) */
    --cn-surface-dark:   #0a192f;   /* 深色区块背景 (footer) */
    --cn-surface-hero:   #0d1c32;   /* Header 深色背景 (新增) */

    /* ── 文字色 ── */
    --cn-text:           #0B192C;
    --cn-text-secondary: #475569;
    --cn-text-muted:     #94A3B8;
    --cn-text-subtle:    #9CA3AF;   /* 最弱化文字 (新增) */
    --cn-text-inverse:   #FFFFFF;
    --cn-text-gold:      #D4AF37;

    /* ── 边框 ── */
    --cn-border:         #E2E8F0;
    --cn-border-light:   #F1F5F9;
    --cn-border-input:   #d1d5db;   /* 输入框边框 (新增) */
    --cn-border-subtle:  #cbd5e1;   /* 浅组件边框 (新增) */
    --cn-border-dark:    #e5e7eb;   /* 稍深边框 / 分割线 (新增) */

    /* ── Hero Overlays (rgba) ── */
    --cn-overlay-dark:      rgba(11, 25, 44, 0.82);
    --cn-overlay-mid:       rgba(11, 25, 44, 0.55);
    --cn-overlay-light:     rgba(11, 25, 44, 0.15);
    --cn-overlay-mobile:    rgba(11, 25, 44, 0.7);
    --cn-overlay-darkest:   rgba(6, 23, 66, 0.92);
    --cn-overlay-dark-mid:  rgba(6, 23, 66, 0.4);
    --cn-overlay-dark-lite: rgba(6, 23, 66, 0.1);

    /* ── 状态色 ── */
    --cn-success-bg:    #d1fae5;
    --cn-success-text:  #065f46;
    --cn-warning-bg:    #fef3c7;
    --cn-warning-text:  #92400e;
    --cn-info-bg:       #dbeafe;
    --cn-info-text:     #1e40af;
    --cn-error-bg:      #fee2e2;
    --cn-error-text:    #991b1b;
    --cn-error:         #b91c1c;
    --cn-private-bg:    #e0e0e0;
    --cn-private-text:  #555;
    --cn-success:       #10B981;    /* 绿色标识 (新标签/出租) */
    --cn-warning:       #f59e0b;    /* 黄色标识 (保留/popular) */

    /* ── 交互控件色 ── */
    --cn-icon-secondary:  #666;      /* 工具按钮图标 */
    --cn-control-muted:   #64748b;   /* 关闭按钮等控件 */
    --cn-chat-border:     #e0e0e0;   /* Chat 气泡边框 */
    --cn-chat-divider:    #e8e8e8;   /* Chat 分隔线/图片边框 */
    --cn-chat-hover:      #152c4a;   /* Chat button hover */
    --cn-modal-overlay:   rgba(10, 25, 47, 0.78);  /* 弹窗遮罩 */
    --cn-badge-unread:    #e00;      /* 未读徽章 */
    --cn-accent-text:     #8a6f18;   /* 金色强调文字 */
    --cn-shadow-login:    0 12px 48px rgba(10,36,99,0.12);  /* 登录卡片阴影 */
    --cn-shadow-qr:       0 10px 30px rgba(10,25,47,0.2);   /* QR 浮窗阴影 */
    --cn-success-strong:  #16a34a;   /* 成功状态/图标 (strong green) */

    /* ── 社交按钮色（第三方品牌色，不改为 CheckNow 色）── */
    --cn-social-google:  #4285f4;
    --cn-social-facebook: #1877f2;
    --cn-social-wechat:  #07c160;
    --cn-social-apple:   #000;

    /* ── 间距系统 ── */
    --cn-space-xs:   4px;
    --cn-space-sm:   8px;
    --cn-space-md:   16px;
    --cn-space-lg:   24px;
    --cn-space-xl:   32px;
    --cn-space-2xl:  48px;
    --cn-space-3xl:  64px;
    --cn-space-4xl:  96px;

    /* ── 圆角 ── */
    --cn-radius-sm:  6px;
    --cn-radius-md:  8px;
    --cn-radius-lg:  12px;
    --cn-radius-xl:  16px;
    --cn-radius-full: 9999px;

    /* ── 阴影 ── */
    --cn-shadow-sm:     0 1px 3px rgba(0,0,0,.06);
    --cn-shadow-md:     0 2px 12px rgba(0,0,0,.08);
    --cn-shadow-lg:     0 8px 24px rgba(0,0,0,.12);
    --cn-shadow-hover:  0 12px 40px rgba(10, 36, 99, 0.12);
    --cn-shadow-blue-sm: 0 2px 12px rgba(10,36,99,0.06);
    --cn-shadow-heavy:  0 24px 60px rgba(10, 25, 47, 0.28);

    /* ── 字体 ── */
    --cn-font-sans:  -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    --cn-font-mono:  "SF Mono", "Fira Code", monospace;

    /* ── 字号 ── */
    --cn-text-xs:    12px;
    --cn-text-sm:    14px;
    --cn-text-base:  16px;
    --cn-text-lg:    18px;
    --cn-text-xl:    20px;
    --cn-text-2xl:   24px;
    --cn-text-3xl:   30px;
    --cn-text-4xl:   36px;
    --cn-text-5xl:   48px;

    /* ── 行高 ── */
    --cn-leading-tight:  1.15;
    --cn-leading-snug:   1.35;
    --cn-leading-normal: 1.6;
    --cn-leading-relaxed: 1.8;

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

    /* ── 图片比例 ── */
    --cn-ratio-hero:    16 / 6;
    --cn-ratio-card:    4 / 3;
    --cn-ratio-content: 16 / 10;
    --cn-ratio-avatar:  1 / 1;

    /* ── 最大宽度 ── */
    --cn-max-w-narrow: 720px;
    --cn-max-w-base:   960px;
    --cn-max-w-wide:  1200px;

    /* ── 全局页面对齐 ──
     * Hero 左对齐内容统一使用该起点；新模板应复用
     * var(--cn-hero-content-inset)，避免自行设置百分比或容器宽度。
     */
    --cn-page-gutter: 24px;
    --cn-hero-content-inset: max(var(--cn-page-gutter), 22vw);
}