/* ============================================================
   司法鉴定协会会员管理系统 · 设计令牌（唯一真相源 / Single Source of Truth）
   ------------------------------------------------------------
   分层结构：
     L1 原子层  —— 原始色阶、字号刻度、间距刻度、圆角、阴影、动效参数
     L2 语义层  —— 主色/文字/玻璃面/边框/渐变，全部引用 L1
     L3 组件层  —— 控件高度、表格行高、侧栏宽、卡片内边距等
     L4 兼容层  —— 旧变量名 → 新令牌映射（保证 style.css 平滑迁移）
     L5 品牌色配置区 —— 只改 --brand-500 一个值，全站联动

   后续改版：只改 L5 里的 --brand-500 一个值，其余色阶自动派生，全站联动。
   玻璃面 / 阴影 / 渐变 / 徽章底色均用 color-mix() 引用品牌色，
   因此换主题时这些派生色会自动联动，无需逐处替换。
   ============================================================ */

/* ==================== L1 原子层 ==================== */
:root {
  /* 品牌色阶统一在 L5「品牌色配置区」由 --brand-500 单值派生，
     此处不再重复声明，避免出现第二个需要维护的色值入口。
     CSS 变量延迟求值，L2/L4 引用 --brand-* 时会取到 L5 的值。 */

  /* 墨色（侧栏 / 标题）：由品牌深色阶派生，改主色时同步联动 */
  --ink-1: var(--brand-900);
  --ink-2: var(--brand-800);
  --ink-3: var(--brand-700);

  /* 中性色阶 */
  --neutral-0:   #ffffff;
  --neutral-50:  #f8fafc;
  --neutral-100: #f1f5f9;
  --neutral-200: #e2e8f0;
  --neutral-300: #cbd5e1;
  --neutral-400: #94a3b8;
  --neutral-500: #64748b;
  --neutral-600: #475569;
  --neutral-700: #334155;
  --neutral-800: #1f2937;
  --neutral-900: #0f172a;

  /* 功能色 */
  --hue-success: #1f9d6b;
  --hue-warning: #e0a33d;
  --hue-error:   #e5484d;
  --hue-info:    #2b7de1;

  /* 字号刻度（B 端紧凑：14px 正文基准） */
  --fs-xs:   0.6875rem;  /* 11px */
  --fs-sm:   0.8125rem;  /* 13px */
  --fs-base: 0.875rem;   /* 14px */
  --fs-lg:   1rem;       /* 16px */
  --fs-xl:   1.125rem;   /* 18px */
  --fs-2xl:  1.25rem;    /* 20px */
  --fs-3xl:  1.5rem;     /* 24px */
  --fs-4xl:  1.75rem;    /* 28px */

  /* 间距刻度（6px 基准） */
  --sp-1:  0.1875rem;  /* 3px  */
  --sp-2:  0.375rem;   /* 6px  */
  --sp-3:  0.5625rem;  /* 9px  */
  --sp-4:  0.75rem;    /* 12px */
  --sp-5:  0.9375rem;  /* 15px */
  --sp-6:  1.125rem;   /* 18px */
  --sp-8:  1.5rem;     /* 24px */
  --sp-10: 1.875rem;   /* 30px */
  --sp-12: 2.25rem;    /* 36px */
  --sp-16: 3rem;       /* 48px */

  /* 圆角 */
  --r-sm:  0.25rem;   /* 4px  */
  --r-md:  0.375rem;  /* 6px  */
  --r-lg:  0.5rem;    /* 8px  */
  --r-xl:  0.75rem;   /* 12px */
  --r-2xl: 1rem;      /* 16px */
  --r-full: 9999px;

  /* 字体 */
  --font-sans: 'Microsoft YaHei UI', 'PingFang SC', 'Segoe UI', system-ui,
               -apple-system, 'Source Han Sans SC', sans-serif;
  --font-mono: 'Consolas', 'Monaco', 'Courier New', monospace;

  /* 动效参数 */
  --dur-fast:   150ms;
  --dur-normal: 240ms;
  --dur-slow:   360ms;
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --ease-out-quart: cubic-bezier(0.165, 0.84, 0.44, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

  /* 玻璃材质参数 */
  --glass-blur: 18px;
  --glass-saturate: 1.15;
  --glass-alpha-panel: 34%;   /* 常规玻璃 */
  --glass-alpha-card: 82%;    /* 卡片级玻璃 */
  --glass-alpha-soft: 60%;
  --glass-alpha-border: 50%;
  --glass-alpha-ink: 55%;     /* 深色玻璃（侧栏） */
  --glass-alpha-ink-border: 16%;
}

/* ==================== L2 语义层（全部引用 L1） ==================== */
:root {
  /* 主色与交互态 */
  --color-primary:        var(--brand-500);
  --color-primary-hover:  var(--brand-600);
  --color-primary-active: var(--brand-700);
  --color-primary-soft:   var(--brand-50);
  --color-accent:         var(--brand-400);
  --color-on-primary:     var(--neutral-0);

  /* 文字层级（浅色模式高对比） */
  --text-primary:   var(--neutral-900);
  --text-body:      var(--neutral-800);
  --text-secondary: var(--neutral-600);
  --text-muted:     var(--neutral-500);
  --text-disabled:  var(--neutral-400);
  --text-heading:   var(--brand-900);
  --text-on-dark:   var(--neutral-0);

  /* 语义状态 */
  --color-success: var(--hue-success);
  --color-warning: var(--hue-warning);
  --color-error:   var(--hue-error);
  --color-info:    var(--hue-info);

  /* 玻璃面（color-mix 让换肤自动联动） */
  --surface-glass:        color-mix(in srgb, var(--neutral-0) var(--glass-alpha-panel), transparent);
  --surface-glass-strong: color-mix(in srgb, var(--neutral-0) var(--glass-alpha-card), transparent);
  --surface-glass-soft:   color-mix(in srgb, var(--neutral-0) var(--glass-alpha-soft), transparent);
  --surface-glass-hover:  color-mix(in srgb, var(--neutral-0) 92%, transparent);
  --surface-ink:          color-mix(in srgb, var(--brand-900) var(--glass-alpha-ink), transparent);
  --surface-page:         var(--neutral-50);

  /* 边框 / 分隔线 */
  --border-glass:  color-mix(in srgb, var(--neutral-0) var(--glass-alpha-border), transparent);
  --border-ink:    color-mix(in srgb, var(--neutral-0) var(--glass-alpha-ink-border), transparent);
  --border-subtle: var(--neutral-200);
  --border-line:   color-mix(in srgb, var(--brand-900) 8%, transparent);
  --border-accent: color-mix(in srgb, var(--brand-500) 30%, transparent);

  /* 渐变 */
  --gradient-primary: linear-gradient(135deg, var(--brand-500) 0%, var(--brand-400) 100%);
  --gradient-sidebar: linear-gradient(180deg, var(--brand-900) 0%, var(--ink-2) 100%);
  --gradient-sheen:   linear-gradient(105deg, transparent 30%,
                        color-mix(in srgb, var(--neutral-0) 45%, transparent) 50%, transparent 70%);

  /* 阴影（引用品牌色，换肤联动） */
  --shadow-xs: 0 1px 2px color-mix(in srgb, var(--brand-900) 5%, transparent);
  --shadow-sm: 0 1px 3px color-mix(in srgb, var(--brand-900) 8%, transparent);
  --shadow-md: 0 4px 10px color-mix(in srgb, var(--brand-900) 10%, transparent);
  --shadow-lg: 0 10px 24px color-mix(in srgb, var(--brand-900) 12%, transparent);
  --shadow-xl: 0 20px 40px color-mix(in srgb, var(--brand-900) 16%, transparent);
  --shadow-glass: 0 8px 32px color-mix(in srgb, var(--brand-900) 18%, transparent);
  --shadow-glow: 0 6px 18px color-mix(in srgb, var(--brand-500) 28%, transparent);
  --shadow-float: 0 14px 34px color-mix(in srgb, var(--brand-900) 20%, transparent);

  /* 场景背景光晕 */
  --bg-glow-a: color-mix(in srgb, var(--brand-400) 20%, transparent);
  --bg-glow-b: color-mix(in srgb, var(--brand-500) 14%, transparent);
  --bg-base-a: #dcebfe;
  --bg-base-b: #eef4fc;
  --bg-base-c: #e6eefb;

  /* 状态徽章底色 */
  --tint-success: color-mix(in srgb, var(--hue-success) 12%, transparent);
  --tint-warning: color-mix(in srgb, var(--hue-warning) 15%, transparent);
  --tint-error:   color-mix(in srgb, var(--hue-error) 12%, transparent);
  --tint-info:    color-mix(in srgb, var(--brand-500) 10%, transparent);
  --tint-neutral: color-mix(in srgb, var(--neutral-500) 12%, transparent);
}

/* ==================== L3 组件层 ==================== */
:root {
  /* 布局 */
  --sidebar-w:        208px;
  --sidebar-w-collapsed: 64px;
  --content-pad:      15px;
  --card-pad:         12px;
  --page-max:         1440px;

  /* 控件 */
  --control-h:        32px;   /* 标准输入框 / 按钮 */
  --control-h-sm:     26px;   /* 表格内小按钮 */
  --control-h-lg:     38px;   /* 主提交按钮 */
  --control-pad-x:    12px;
  --control-pad-y:    7px;
  --control-font:     var(--fs-sm);
  --control-radius:   var(--r-md);
  --control-gap:      var(--sp-2);

  /* 表格 */
  --table-row-h:      32px;
  --table-cell-pad-y: 7px;
  --table-cell-pad-x: 10px;
  --table-head-font:  0.75rem;
  --table-body-font:  var(--fs-sm);

  /* 侧栏 */
  --nav-item-h:       32px;
  --nav-icon-size:    17px;
  --sidebar-logo:     54px;
  --sidebar-logo-img: 40px;
  --avatar-sm:        26px;

  /* 统计卡 / 图标 */
  --stat-icon-size:   42px;
  --stat-value-font:  var(--fs-3xl);
  --member-avatar:    52px;

  /* 页头 */
  --page-title-font:  1.375rem;
  --card-title-font:  1rem;
  --section-font:     0.9375rem;

  /* 登录卡 */
  --login-card-w:     360px;
  --login-logo:       76px;
  --login-logo-img:   52px;

  /* 层级 */
  --z-bg: -1;
  --z-base: 1;
  --z-sticky: 10;
  --z-topbar: 20;
  --z-modal: 1000;
  --z-toast: 1100;
}

/* ==================== L4 兼容层（旧变量名 → 新令牌） ====================
   style.css 中大量引用旧名，此层保证无需逐处改写即可享受新令牌与换肤 */
:root {
  --blue-300: var(--brand-300);
  --blue-400: var(--brand-500);
  --blue-500: var(--brand-600);
  --blue-600: var(--brand-700);
  --blue-700: var(--brand-800);
  --accent:   var(--brand-400);

  /* 注意：--ink-2 / --ink-3 已在 L1 定义且同名同值，此处不再重复声明，
     避免 `var(--x): var(--x)` 自引用导致变量失效 */
  --ink:   var(--brand-900);

  --primary-50:  var(--brand-50);
  --primary-100: var(--brand-100);
  --primary-200: var(--brand-200);
  --primary-300: var(--brand-300);
  --primary-400: var(--brand-500);
  --primary-500: var(--brand-900);   /* 兼容：原用于标题深色文字 */
  --primary-600: var(--brand-800);
  --primary-700: var(--brand-900);
  --primary-800: var(--ink-2);
  --primary-900: var(--brand-900);

  --gold-50:  var(--brand-50);
  --gold-100: var(--brand-100);
  --gold-200: var(--brand-100);
  --gold-300: var(--brand-400);
  --gold-400: var(--brand-500);
  --gold-500: var(--brand-600);
  --gold-600: var(--brand-700);

  --gray-50:  var(--neutral-50);
  --gray-100: var(--neutral-100);
  --gray-200: var(--neutral-200);
  --gray-300: var(--neutral-300);
  --gray-400: var(--neutral-400);
  --gray-500: var(--neutral-500);
  --gray-600: var(--neutral-600);
  --gray-700: var(--neutral-700);
  --gray-800: var(--neutral-800);
  --gray-900: var(--neutral-900);

  --success: var(--color-success);
  --warning: var(--color-warning);
  --error:   var(--color-error);
  --info:    var(--color-info);

  --gradient-gold: var(--gradient-primary);

  --glass-bg:         var(--surface-glass);
  --glass-bg-strong:  var(--surface-glass-strong);
  --glass-bg-soft:    var(--surface-glass-soft);
  --glass-border:     var(--border-glass);
  --glass-line:       var(--border-line);
  /* --glass-blur 已在 L1 定义，不重复声明 */
  --glass-ink:        var(--surface-ink);
  --glass-ink-border: var(--border-ink);

  --text-xs:   var(--fs-xs);
  --text-sm:   var(--fs-sm);
  --text-base: var(--fs-base);
  --text-lg:   var(--fs-lg);
  --text-xl:   var(--fs-xl);
  --text-2xl:  var(--fs-2xl);
  --text-3xl:  var(--fs-3xl);
  --text-4xl:  var(--fs-4xl);

  --space-1:  var(--sp-1);
  --space-2:  var(--sp-2);
  --space-3:  var(--sp-3);
  --space-4:  var(--sp-4);
  --space-5:  var(--sp-5);
  --space-6:  var(--sp-6);
  --space-8:  var(--sp-8);
  --space-10: var(--sp-10);
  --space-12: var(--sp-12);
  --space-16: var(--sp-16);

  --radius-sm:  var(--r-sm);
  --radius-md:  var(--r-md);
  --radius-lg:  var(--r-lg);
  --radius-xl:  var(--r-xl);
  --radius-2xl: var(--r-2xl);
  --radius-full: var(--r-full);

  /* --shadow-xs/sm/md/lg/xl、--shadow-glass 已在 L2 定义（同名同值），不重复声明 */
  --shadow-gold:    var(--shadow-glow);
  /* --font-sans / --font-mono / --ease-out-quart 已在 L1 定义，不重复声明 */
  --transition-fast:   var(--dur-fast) ease;
  --transition-normal: var(--dur-normal) ease;
}

/* ==================== L5 品牌色配置区（后续改版唯一需要改的地方） ====================
   目标：改「一处颜色」→ 全站需要改的地方一起改掉，降低后续改版工作量。

   ★ 只需改下面 --brand-500 这一个值，其余色阶全部由它自动派生：
     · 浅色阶（50~400）  = 主色按不同比例混入白色
     · 深色阶（600~900） = 主色按不同比例混入墨色
     · 场景背景光晕      = 主色淡混
   因此按钮、链接、焦点、激活、侧栏、玻璃面板、阴影、渐变、徽章、
   图表、边框会一起变化，无需逐页或逐处替换。

   如需保留「深蓝墨色侧栏」不随主色变化：把 --ink-base 固定为 #0b1a33 即可，
   --brand-900 会自动用它做混色基准，其余部分仍一键联动。

   验证：改 --brand-500 后刷新任一页面，主按钮/链接/图表/侧栏即同步变化。
   ================================================================================== */
:root {
  /* ↓↓↓ 改版只改这一个值 ↓↓↓ */
  --brand-500: #2b7de1;        /* 主色：按钮 / 链接 / 焦点 / 激活 */
  --ink-base:  #0b1a33;        /* 墨色基准：深色阶与侧栏的混色底 */

  /* 以下全部自动派生，无需手工维护 */
  --brand-50:  color-mix(in srgb, var(--brand-500) 8%,  #ffffff);
  --brand-100: color-mix(in srgb, var(--brand-500) 17%, #ffffff);
  --brand-200: color-mix(in srgb, var(--brand-500) 30%, #ffffff);
  --brand-300: color-mix(in srgb, var(--brand-500) 55%, #ffffff);
  --brand-400: color-mix(in srgb, var(--brand-500) 80%, #ffffff);
  --brand-600: color-mix(in srgb, var(--brand-500) 85%, var(--ink-base));
  --brand-700: color-mix(in srgb, var(--brand-500) 68%, var(--ink-base));
  --brand-800: color-mix(in srgb, var(--brand-500) 45%, var(--ink-base));
  --brand-900: color-mix(in srgb, var(--brand-500) 22%, var(--ink-base));

  --bg-base-a: color-mix(in srgb, var(--brand-400) 22%, #ffffff);
  --bg-base-b: color-mix(in srgb, var(--brand-100) 55%, #ffffff);
  --bg-base-c: color-mix(in srgb, var(--brand-300) 16%, #ffffff);
  /* ↑↑↑ 改版只改这一个值 ↑↑↑ */

  /* 玻璃材质参数（与配色无关的质感参数，一般无需改动） */
  --glass-alpha-panel: 34%;
  --glass-alpha-card:  82%;
  --glass-alpha-soft:  60%;
  --glass-alpha-border: 50%;
  --glass-alpha-ink:   55%;
  --glass-alpha-ink-border: 16%;
  --glass-blur: 18px;
  --glass-saturate: 1.15;
}