/*!
 * iohow Design System — Tokens v1.0
 * 统一设计令牌，所有子站通过 <link> 引用此文件，不要复制到各仓库。
 * CDN 建议路径：https://www.iohow.com/ds/v1/tokens.css
 */

:root {
  /* ====== 品牌色 Brand ====== */
  --ds-brand-50:  #eef2ff;
  --ds-brand-100: #e0e7ff;
  --ds-brand-200: #c7d2fe;
  --ds-brand-300: #a5b4fc;
  --ds-brand-400: #818cf8;
  --ds-brand-500: #6366f1;   /* 主品牌色：Indigo，用于 logo / 主按钮 / 链接 */
  --ds-brand-600: #4f46e5;
  --ds-brand-700: #4338ca;
  --ds-brand-800: #3730a3;
  --ds-brand-900: #312e81;

  /* ====== 中性色 Neutral（浅色模式）====== */
  --ds-gray-0:   #ffffff;
  --ds-gray-50:  #f8fafc;
  --ds-gray-100: #f1f5f9;
  --ds-gray-200: #e2e8f0;
  --ds-gray-300: #cbd5e1;
  --ds-gray-400: #94a3b8;
  --ds-gray-500: #64748b;
  --ds-gray-600: #475569;
  --ds-gray-700: #334155;
  --ds-gray-800: #1e293b;
  --ds-gray-900: #0f172a;
  --ds-gray-950: #020617;

  /* ====== 语义色 Semantic ====== */
  --ds-success-500: #22c55e;
  --ds-success-600: #16a34a;
  --ds-warning-500: #f59e0b;
  --ds-warning-600: #d97706;
  --ds-danger-500:  #ef4444;
  --ds-danger-600:  #dc2626;
  --ds-info-500:    #0ea5e9;

  /* 密码强度专用（弱→强 4 档，pass.iohow.com 等生成器类工具用） */
  --ds-strength-weak:   #ef4444;
  --ds-strength-fair:   #f59e0b;
  --ds-strength-good:   #eab308;
  --ds-strength-strong: #22c55e;

  /* ====== 分类色 Category（导航页 7 大分类，H 值均分，S/L 固定保证一体感）====== */
  --ds-cat-network:   #0ea5e9;  /* 网络工具 */
  --ds-cat-design:    #ec4899;  /* 设计工具 */
  --ds-cat-security:  #ef4444;  /* 安全工具 */
  --ds-cat-generator: #8b5cf6;  /* 生成工具 */
  --ds-cat-convert:   #14b8a6;  /* 转换工具 */
  --ds-cat-lookup:    #6366f1;  /* 查询工具 */
  --ds-cat-docs:      #64748b;  /* 工具书/教程 */

  /* ====== 语义化角色变量（浅色模式默认值）====== */
  --ds-bg:            var(--ds-gray-50);
  --ds-bg-elevated:   var(--ds-gray-0);
  --ds-bg-subtle:     var(--ds-gray-100);
  --ds-border:        var(--ds-gray-200);
  --ds-border-strong: var(--ds-gray-300);
  --ds-text:          var(--ds-gray-900);
  --ds-text-muted:    var(--ds-gray-500);
  --ds-text-inverse:  var(--ds-gray-0);
  --ds-link:          var(--ds-brand-600);
  --ds-focus-ring:    var(--ds-brand-400);

  /* ====== 字体 Typography ====== */
  --ds-font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI",
    "PingFang SC", "Microsoft YaHei", "Helvetica Neue", sans-serif;
  --ds-font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo,
    Consolas, "Liberation Mono", monospace; /* IP、密码、哈希等技术数值用等宽字体 */

  --ds-text-xs:   0.75rem;   /* 12px 辅助信息 */
  --ds-text-sm:   0.875rem;  /* 14px 正文次级 */
  --ds-text-base: 1rem;      /* 16px 正文 */
  --ds-text-lg:   1.125rem;  /* 18px */
  --ds-text-xl:   1.5rem;    /* 24px 卡片标题 */
  --ds-text-2xl:  2rem;      /* 32px 页面 H1 */
  --ds-text-3xl:  2.75rem;   /* 44px 首页大标题 */

  --ds-leading-tight:  1.25;
  --ds-leading-normal: 1.6;

  /* ====== 间距 Spacing（4px 基准）====== */
  --ds-space-1: 0.25rem;
  --ds-space-2: 0.5rem;
  --ds-space-3: 0.75rem;
  --ds-space-4: 1rem;
  --ds-space-5: 1.25rem;
  --ds-space-6: 1.5rem;
  --ds-space-8: 2rem;
  --ds-space-10: 2.5rem;
  --ds-space-12: 3rem;
  --ds-space-16: 4rem;

  /* ====== 圆角 / 阴影 / 动效 ====== */
  --ds-radius-sm: 6px;
  --ds-radius-md: 10px;
  --ds-radius-lg: 16px;
  --ds-radius-full: 999px;

  --ds-shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.06);
  --ds-shadow-md: 0 4px 12px rgba(15, 23, 42, 0.08);
  --ds-shadow-lg: 0 12px 32px rgba(15, 23, 42, 0.12);

  --ds-transition-fast: 120ms ease;
  --ds-transition-base: 200ms ease;

  --ds-container-width: 960px; /* 单工具页最大内容宽度，保持所有子站一致 */
  --ds-container-wide:  1200px; /* 导航页 / 多卡片页 */
}

/* ====== 文档/教程站专用色（对应 nb.iohow.com 这类侧栏阅读型站点）======
 * 该类站点目标用户（运维/开发者）偏好深色阅读界面，深色令牌单独抽出，
 * 供 data-theme="dark" 默认启用时使用，不依赖系统跟随。 */
:root {
  --ds-docs-bg-dark:     #1a1a1a;
  --ds-docs-sidebar-dark:#141414;
  --ds-docs-border-dark: #2a2a2a;
}

/* ====== 深色模式：跟随系统 ====== */
@media (prefers-color-scheme: dark) {
  :root {
    --ds-bg:            var(--ds-gray-950);
    --ds-bg-elevated:   var(--ds-gray-900);
    --ds-bg-subtle:     var(--ds-gray-800);
    --ds-border:        var(--ds-gray-700);
    --ds-border-strong: var(--ds-gray-600);
    --ds-text:          var(--ds-gray-50);
    --ds-text-muted:    var(--ds-gray-400);
    --ds-text-inverse:  var(--ds-gray-900);
    --ds-link:          var(--ds-brand-400);
    --ds-focus-ring:    var(--ds-brand-400);
    --ds-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
    --ds-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.35);
    --ds-shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.45);
  }
}

/* 手动切换深色模式：<html data-theme="dark"> */
html[data-theme="dark"] {
  --ds-bg:            var(--ds-gray-950);
  --ds-bg-elevated:   var(--ds-gray-900);
  --ds-bg-subtle:     var(--ds-gray-800);
  --ds-border:        var(--ds-gray-700);
  --ds-border-strong: var(--ds-gray-600);
  --ds-text:          var(--ds-gray-50);
  --ds-text-muted:    var(--ds-gray-400);
  --ds-text-inverse:  var(--ds-gray-900);
  --ds-link:          var(--ds-brand-400);
}
html[data-theme="light"] {
  --ds-bg:            var(--ds-gray-50);
  --ds-bg-elevated:   var(--ds-gray-0);
  --ds-bg-subtle:     var(--ds-gray-100);
  --ds-border:        var(--ds-gray-200);
  --ds-text:          var(--ds-gray-900);
  --ds-text-muted:    var(--ds-gray-500);
}