/* ================================================================
 *  KYROC · 全站统一设计 Tokens (css/tokens.css)
 *  合并 6 套 :root：common.css / --color-* / --guide-* / --pair-* / --support-* / software-download
 *  最后更新：2026-08-01
 * ================================================================ */

/* ==========================================================
 *  1. BASE TOKENS  基础语义 tokens
 * ========================================================== */

:root {
    /* 明确声明默认浅色方案，防止浏览器在系统深色模式下对桌面端自动反色 */
    color-scheme: light only;

    /* --- Primary / Brand 主色 --- */
    --brand-primary:        #1976D2;   /* 品牌主色 (深蓝)   */
    --brand-primary-soft:   #4285F4;   /* 品牌辅色 (亮蓝)   */
    --brand-primary-hover:  #1565C0;   /* 主色悬停          */
    --brand-primary-deep:   #0E5BA8;   /* 主色深墨          */
    --brand-primary-bg:     #EBF3FF;   /* 主色淡背景        */
    --brand-alpha-06:       rgba(25, 118, 210, 0.06);
    --brand-alpha-08:       rgba(25, 118, 210, 0.08);
    --brand-alpha-12:       rgba(25, 118, 210, 0.12);

    /* --- Text 文本色 (用户指定) --- */
    --text-primary:   #0B1220;   /* 主文本 (用户指定 #0B1220) */
    --text-secondary: #556675;   /* 次文本 (用户指定 #556675) */
    --text-faint:     #9AA6B2;   /* 弱化/辅助文本              */
    --text-link:      var(--brand-primary);

    /* --- Surface / Background 背景 & 表面 --- */
    --surface-page:     #FFFFFF;   /* 页面白底   */
    --surface-card:     #FAFBFD;   /* 卡片次级   */
    --surface-body:     #F6F9FD;   /* 内容区浅蓝灰 */
    --surface-body-alt: #F8FAFC;   /* 内容区更浅（个别页） */
    --surface-bg-alt:   #F0F5FA;   /* 整页浅灰 (style.css 背景) */

    /* --- Border / Line 边框分隔线 --- */
    --line-default:   #E2E8F0;   /* 标准分隔线        */
    --line-subtle:    #EEF2F7;   /* 软性细分隔线      */
    --line-faint:     #EDF0F5;   /* 移动端细分隔线    */
    --line-brand:     var(--brand-alpha-12);  /* 主色描边 */

    /* --- Dark / 深色按钮 (移动端 pair 命名空间) --- */
    --pair-dark-color:      #1A2332;   /* 深色近黑按钮 (规范值：非主色) */
    --pair-dark-hover:      #2D3A4F;   /* 深色按钮悬停               */

    /* --- Typography 排版 --- */
    --font-sans: 'Noto Sans SC', -apple-system, BlinkMacSystemFont,
                 'Segoe UI', 'PingFang SC', 'Microsoft YaHei', sans-serif;
    --font-serif: 'Fraunces', 'Noto Serif SC', serif;
    --font-mono: 'JetBrains Mono', 'Consolas', 'Monaco', monospace;

    /* --- Page Background 页面背景 --- */
    --bg-page-gradient: linear-gradient(135deg, #E8F0FE 0%, #F5F9FF 40%, #EEF6FF 70%, #F0F5FF 100%);

    /* --- Focus Ring 焦点环 --- */
    --focus-ring-color:    var(--brand-primary-soft);
    --focus-ring-width:    2px;
    --focus-ring-offset:   2px;

    /* --- Layout 布局 --- */
    --header-height:    64px;
    --content-width:    1200px;
    --footer-height:    70px;

    /* --- Typography Sizes 字号 --- */
    --font-size-logo:      25px;   /* 导航栏 LOGO 文字 */
    --font-size-footer:    14px;   /* 页脚文字 */

    /* --- Space Scale 间距 (8-pt grid) --- */
    --space-1:   4px;
    --space-2:   8px;
    --space-3:  12px;
    --space-4:  16px;
    --space-5:  20px;
    --space-6:  24px;
    --space-8:  32px;
    --space-10: 40px;
    --space-12: 48px;
    --space-16: 64px;

    /* --- Radius 圆角 --- */
    --radius-xs:  4px;
    --radius-sm:  6px;
    --radius-md:  8px;
    --radius-lg:  10px;
    --radius-xl:  12px;

    /* --- Shadow 阴影 --- */
    --shadow-xs:    0 1px 2px rgba(0, 0, 0, 0.05);
    --shadow-sm:    0 2px 4px rgba(0, 0, 0, 0.1);
    --shadow-md:    0 4px 14px rgba(25, 118, 210, 0.18);
    --shadow-lg:    0 4px 14px rgba(25, 118, 210, 0.30);
    --shadow-blue:        0 4px 20px rgba(59, 130, 246, 0.08);
    --shadow-blue-hover:  0 8px 30px rgba(59, 130, 246, 0.12);

    /* --- Transition 过渡 --- */
    --ease:         ease;
    --dur-fast:     0.20s;
    --dur:          0.30s;
    --dur-slow:     0.35s;
}

/* ==========================================================
 *  2. KYROC BRAND 命名空间别名 (--color-*)
 *     → index.html / kyroc/buy.html / kyroc/contact.html
 * ========================================================== */

:root {
    --color-bg:              var(--surface-page);
    --color-surface:         var(--surface-card);
    --color-surface-2:       var(--surface-body);

    --color-primary:         var(--brand-primary);
    --color-primary-hover:   var(--brand-primary-hover);
    --color-primary-light:   var(--brand-primary-soft);
    --color-accent:          var(--brand-primary);

    --color-text:            var(--text-primary);
    --color-text-secondary:  #666666;              /* 向后兼容 */
    --color-text-muted:      var(--text-secondary);

    --color-background:           var(--surface-page);
    --color-background-secondary: var(--surface-bg-alt);

    --color-border:          var(--line-brand);

    --font-sans:             var(--font-sans);
}

/* ==========================================================
 *  3. KS100 GUIDE · 桌面端 命名空间别名 (--guide-*)
 *     → ks100/computer-guide-* / quick-start / use-cases /
 *       computer-guide.html / related-support 桌面部分等
 * ========================================================== */

:root {
    --guide-blue:         var(--brand-primary);
    --guide-blue-soft:    var(--brand-primary-soft);
    --guide-blue-light:   var(--brand-primary-bg);
    --guide-blue-10:      var(--brand-alpha-08);
    --guide-blue-ink:     var(--brand-primary-deep);
    --guide-blue-tint:    var(--brand-alpha-06);

    --guide-ink:          var(--text-primary);
    --guide-muted:        var(--text-secondary);
    --guide-faint:        var(--text-faint);

    --guide-surface:       var(--surface-page);
    --guide-surface-alt:   var(--surface-body);
    --guide-surface-card:  var(--surface-card);

    --guide-line:         var(--line-default);
    --guide-line-soft:    var(--line-subtle);
}

/* ==========================================================
 *  4. KS100 GUIDE · 移动端 命名空间别名 (--pair-*)
 *     → ks100/mobile-guide-* / pair.html 移动端媒体查询
 * ========================================================== */

:root {
    --pair-blue:         var(--brand-primary);
    --pair-blue-soft:    var(--brand-primary-soft);
    --pair-blue-light:   var(--brand-primary-bg);
    --pair-blue-10:      var(--brand-alpha-08);

    --pair-dark:         var(--pair-dark-color);
    --pair-dark-hover:   var(--pair-dark-hover);

    --pair-ink:          var(--text-primary);
    --pair-muted:        var(--text-secondary);
    --pair-faint:        var(--text-faint);

    --pair-surface:       var(--surface-page);
    --pair-surface-alt:   var(--surface-body);
    --pair-surface-card:  var(--surface-card);

    --pair-line:         var(--line-default);
    --pair-line-light:   var(--line-subtle);
}

/* ==========================================================
 *  5. RELATED-SUPPORT · 单页命名空间 (--support-*)
 *     → ks100/related-support.html
 * ========================================================== */

:root {
    --support-blue:         var(--brand-primary);
    --support-blue-soft:    var(--brand-primary-soft);
    --support-blue-light:   var(--brand-primary-bg);
    --support-blue-10:      var(--brand-alpha-08);

    --support-ink:          var(--text-primary);
    --support-muted:        var(--text-secondary);
    --support-faint:        var(--text-faint);

    --support-surface:       var(--surface-page);
    --support-surface-alt:   var(--surface-body);
    --support-surface-card:  var(--surface-card);

    --support-line:         var(--line-default);
    --support-line-soft:    var(--line-subtle);
}

/* ==========================================================
 *  6. SOFTWARE-DOWNLOAD · Tailwind 风格别名
 *     → ks100/software-download.html
 * ========================================================== */

:root {
    --primary:         #3B82F6;
    --primary-dark:    #2563EB;
    --secondary:       #6366F1;
    --success:         #10B981;
    --bg-light:        #F8FAFC;
    --bg-white:        var(--surface-page);
    /* 以下两个原以 --text-primary/--text-secondary 命名，会全局覆盖基础 tokens；
       改名到 --sd- 命名空间，software-download.html 单独引用，保留单一真源 */
    --sd-text-primary:    #1E293B;  /* 单页语义：slate-800 */
    --sd-text-secondary:  #64748B;
    --border:          var(--line-default);
    --shadow:          var(--shadow-blue);
    --shadow-hover:    var(--shadow-blue-hover);
}

/* Z-INDEX TOKENS 已独立为 css/z-index.css，此处不再重复定义 */
/* 引用顺序：tokens.css → z-index.css → 其他样式文件 */

/* ==========================================================
 *  8. FOCUS RING  焦点环全局样式 (从 common.css 迁移)
 * ========================================================== */

*:focus-visible {
    outline: var(--focus-ring-width) solid var(--focus-ring-color);
    outline-offset: var(--focus-ring-offset);
}
*:focus:not(:focus-visible) {
    outline: none;
}
a:focus-visible,
button:focus-visible,
[role="button"]:focus-visible {
    outline: var(--focus-ring-width) solid var(--focus-ring-color);
    outline-offset: var(--focus-ring-offset);
    border-radius: 4px;
}

/* ==========================================================
 *  9. SPACING UTILITIES  间距工具类 (从 common.css 迁移)
 * ========================================================== */

.mt-1  { margin-top: var(--space-1);  }
.mt-2  { margin-top: var(--space-2);  }
.mt-3  { margin-top: var(--space-3);  }
.mt-4  { margin-top: var(--space-4);  }
.mt-6  { margin-top: var(--space-6);  }
.mt-8  { margin-top: var(--space-8);  }
.mt-12 { margin-top: var(--space-12); }

.mb-1  { margin-bottom: var(--space-1);  }
.mb-2  { margin-bottom: var(--space-2);  }
.mb-3  { margin-bottom: var(--space-3);  }
.mb-4  { margin-bottom: var(--space-4);  }
.mb-6  { margin-bottom: var(--space-6);  }
.mb-8  { margin-bottom: var(--space-8);  }
.mb-12 { margin-bottom: var(--space-12); }