/* ============================================================
   LH Capacitors — COLOR SYSTEM v2 ·「深墨蓝 / 瓷白 / 黄铜」
   ============================================================
   色彩职责
   ------------------------------------------------------------
   主色   Primary    navy-600 #223f5e   按钮、链接、强调线；深浅模块共用一套
   辅助色 Secondary  navy-50  冰川瓷    浅色模块底（冷）
                     bone     暖骨白    浅色模块底（暖）
   强调色 Accent     brass    黄铜       仅 10%：序号、眉标、细线、激活态点缀
   中性   Neutral    neutral  冷灰       正文、卡片、分隔线、大面积区域
   深色模块          navy-800 深墨 / navy-700 藏青 / neutral-800 石墨

   模块主题（.t-*）用于让相邻模块底色交替，不允许连续两个模块同色
   ------------------------------------------------------------
   .t-glacier 冷瓷浅  .t-bone 暖骨浅  .t-paper 中性浅
   .t-navy 藏青深     .t-ink 深墨深   .t-graphite 石墨深
   深色常量区（--dark / --on-dark / --on-dark-accent）供「永远深色」的
   组件使用（topbar、轮播控制台、dark 卡片、mega CTA、图片角标）。

   可读性（实测，非估算）
   ------------------------------------------------------------
   正文/白底 19.1  次级 10.0  弱文字 6.5  主色文字 10.8  黄铜文字 6.1
   深墨底: 白 18.1 次级 15.2 弱文字 10.4 黄铜 9.6
   藏青底: 白 14.6 次级 12.2 弱文字  8.4 黄铜 7.7
   石墨底: 白 15.5 次级 13.0 弱文字  8.9 黄铜 8.3
   ============================================================ */

:root {
  /* ============================================================
     1. 原始色阶 PRIMITIVES — 全站唯一允许写死色值的地方
     ============================================================ */

  /* 1.1 主色族 Navy（单一色相 H=252） */
  --navy-50:  oklch(96.5% 0.012 252);  /* #eef4fc 冰川瓷：浅色模块底 */
  --navy-100: oklch(92%   0.024 252);  /* #d9e6f5 浅蓝分隔/淡染 */
  --navy-200: oklch(84%   0.042 252);  /* #b7cde6 */
  --navy-300: oklch(71%   0.062 252);  /* #86a5c8 深底弱文字 */
  --navy-400: oklch(55%   0.082 252);  /* #4d74a0 深底强描边 */
  --navy-500: oklch(45%   0.078 252);  /* #33577f 深底分隔线 */
  --navy-600: oklch(36%   0.065 252);  /* #223f5e ★主色：按钮/链接 */
  --navy-700: oklch(28%   0.050 252);  /* #152a41 藏青深模块 */
  --navy-800: oklch(20%   0.036 252);  /* #091726 深墨：hero/页脚 */
  --navy-900: oklch(14%   0.026 252);

  /* 1.2 中性族 Neutral（冷灰，用于文字、卡片、分隔线） */
  --neutral-0:   oklch(100%  0     0);    /* 卡片 / 抬升面 */
  --neutral-50:  oklch(97.5% 0.003 250);  /* 默认页面底 */
  --neutral-100: oklch(94%   0.004 250);  /* 分组底 / chip */
  --neutral-200: oklch(88.5% 0.005 250);  /* 更深一级底 */
  --neutral-300: oklch(82%   0.006 250);  /* 分隔线 */
  --neutral-400: oklch(70%   0.008 250);  /* 强分隔线 / 控件描边 */
  --neutral-500: oklch(58%   0.009 250);
  --neutral-600: oklch(48%   0.010 250);  /* 弱文字 */
  --neutral-700: oklch(38%   0.011 250);  /* 次级正文 */
  --neutral-800: oklch(26%   0.008 250);  /* 石墨深模块 */
  --neutral-900: oklch(17%   0.010 250);  /* 正文 / 标题 */

  /* 1.3 暖骨 Bone（暖调浅底，与冷瓷交替使用） */
  --bone:      oklch(94.5% 0.010 90);   /* 暖骨：比冷瓷深一档，形成冷暖+明度双重差 */
  --bone-100:  oklch(90%   0.012 90);

  /* 1.4 强调族 Brass 黄铜（≤10% 面积） */
  --brass-300: oklch(80% 0.070 75);  /* #d9b88b 深底上的强调 */
  --brass-400: oklch(72% 0.085 75);
  --brass-500: oklch(62% 0.095 75);
  --brass-600: oklch(50% 0.090 75);  /* #815b1f 浅底上的强调文字 */
  --brass-700: oklch(42% 0.075 75);

  /* 1.5 状态 State */
  --green-600:  oklch(52%   0.110 155);
  --green-50:   oklch(95.5% 0.030 155);
  --amber-600:  oklch(52%   0.130 70);
  --amber-50:   oklch(95.5% 0.038 70);
  --red-600:    oklch(48%   0.150 25);
  --red-50:     oklch(95.5% 0.028 25);

  /* ============================================================
     2. 语义层 SEMANTIC（默认=浅色模块）
     ============================================================ */
  --surface:          var(--neutral-50);   /* 页面 / 模块底 */
  --surface-raised:   var(--neutral-0);    /* 卡片、面板、输入框 */
  --surface-sunken:   var(--neutral-100);  /* 分组底、chip、隔行 */
  --surface-sunken-2: var(--neutral-200);
  --surface-tint:     var(--navy-50);      /* 主色淡染：hover / 选中 */

  --text:            var(--neutral-900);
  --text-secondary:  var(--neutral-700);
  --text-muted:      var(--neutral-600);
  --text-on-brand:   var(--neutral-0);     /* 主色按钮上的文字 */

  --border:          var(--neutral-300);
  --border-strong:   var(--neutral-400);

  --brand:           var(--navy-600);  /* 按钮底、链接 */
  --brand-hover:     var(--navy-700);
  --brand-active:    var(--navy-800);
  --brand-subtle:    var(--navy-50);
  --brand-subtle-2:  var(--navy-100);
  --brand-focus-ring:var(--navy-100);
  --accent-mark:     var(--brass-600); /* 序号、眉标、细线等点缀 */

  --state-success:     var(--green-600);
  --state-success-bg:  var(--green-50);
  --state-warn:        var(--amber-600);
  --state-warn-bg:     var(--amber-50);
  --state-danger:      var(--red-600);
  --state-danger-bg:   var(--red-50);
  --state-disabled-bg: var(--neutral-100);
  --state-disabled-fg: var(--neutral-600);

  /* ============================================================
     3. 深色常量区（永远深色的组件用，不受模块主题影响）
     ============================================================ */
  --dark-surface:      var(--navy-800);  /* 深墨 */
  --dark-surface-2:    var(--navy-700);  /* 抬升 / hover */
  --dark-surface-3:    var(--navy-600);  /* 更高一级（轮播视窗） */
  --dark-text:         var(--neutral-0);
  --dark-text-2:       var(--neutral-100);
  --dark-text-3:       var(--navy-300);
  --dark-border:       var(--navy-600);
  --dark-border-2:     var(--navy-500);
  --on-dark-accent:    var(--brass-300); /* 深底上的强调（黄铜亮调） */

  /* ============================================================
     4. 兼容层 LEGACY ALIAS
     ============================================================ */
  --paper:         var(--surface);
  --paper-2:       var(--surface-sunken);
  --paper-3:       var(--surface-sunken-2);
  --ink:           var(--text);
  --ink-soft:      var(--text-secondary);
  --ink-faint:     var(--text-muted);
  --line:          var(--border);
  --line-strong:   var(--border-strong);
  --accent:        var(--brand);
  --accent-strong: var(--accent-mark);
  --accent-bright: var(--on-dark-accent);
  --accent-soft:   var(--brand-subtle-2);
  --on-accent:     var(--text-on-brand);
  --dark:          var(--dark-surface);
  --dark-2:        var(--dark-surface-2);
  --dark-3:        var(--dark-surface-3);
  --on-dark:       var(--dark-text);
  --on-dark-soft:  var(--dark-text-2);
  --on-dark-faint: var(--dark-text-3);
  --dark-line:     var(--dark-border);
  --dark-line-2:   var(--dark-border-2);
}

/* ============================================================
   5. 模块主题 MODULE THEMES
   加在 <section> 上，局部重定义语义变量，组件无需改动即可换底。
   相邻模块必须使用不同主题，禁止连续两个模块同色。
   ============================================================ */

/* 主题类同时把底色与文字落到所在模块上（组件内部只需用语义变量） */
.t-glacier, .t-bone, .t-paper, .t-navy, .t-ink, .t-graphite {
  background-color: var(--surface);
  color: var(--text);
}

/* 冷瓷浅 — 冰川蓝调，科技感 */
.t-glacier {
  --surface:          var(--navy-50);
  --surface-raised:   var(--neutral-0);
  --surface-sunken:   var(--navy-100);
  --surface-sunken-2: var(--navy-200);
  --border:           var(--navy-100);
  --border-strong:    var(--navy-200);
  --text:             var(--neutral-900);
  --text-secondary:   var(--neutral-700);
  --text-muted:       var(--neutral-600);
  --brand:            var(--navy-600);
  --brand-hover:      var(--navy-700);
  --brand-active:     var(--navy-800);
  --brand-subtle:     var(--neutral-0);
  --brand-subtle-2:   var(--navy-100);
  --brand-focus-ring: var(--navy-100);
  --accent-mark:      var(--brass-600);
}

/* 暖骨浅 — 暖白，与冷瓷交替形成冷暖节奏 */
.t-bone {
  --surface:          var(--bone);
  --surface-raised:   var(--neutral-0);
  --surface-sunken:   var(--bone-100);
  --surface-sunken-2: var(--neutral-200);
  --border:           oklch(89% 0.008 90);
  --border-strong:    oklch(76% 0.010 90);
  --text:             var(--neutral-900);
  --text-secondary:   var(--neutral-700);
  --text-muted:       var(--neutral-600);
  --brand:            var(--navy-600);
  --brand-hover:      var(--navy-700);
  --brand-active:     var(--navy-800);
  --brand-subtle:     var(--neutral-0);
  --brand-subtle-2:   var(--navy-100);
  --brand-focus-ring: var(--navy-100);
  --accent-mark:      var(--brass-600);
}

/* 中性浅 — 默认页面底 */
.t-paper {
  --surface:          var(--neutral-50);
  --surface-raised:   var(--neutral-0);
  --surface-sunken:   var(--neutral-100);
  --surface-sunken-2: var(--neutral-200);
  --border:           var(--neutral-300);
  --border-strong:    var(--neutral-400);
  --text:             var(--neutral-900);
  --text-secondary:   var(--neutral-700);
  --text-muted:       var(--neutral-600);
  --brand:            var(--navy-600);
  --brand-hover:      var(--navy-700);
  --brand-active:     var(--navy-800);
  --brand-subtle:     var(--navy-50);
  --brand-subtle-2:   var(--navy-100);
  --brand-focus-ring: var(--navy-100);
  --accent-mark:      var(--brass-600);
}

/* 藏青深 — 主色深调 */
.t-navy {
  --surface:          var(--navy-700);
  --surface-raised:   var(--navy-600);
  --surface-sunken:   var(--navy-600);
  --surface-sunken-2: var(--navy-500);
  --border:           var(--navy-500);
  --border-strong:    var(--navy-400);
  --text:             var(--neutral-0);
  --text-secondary:   var(--neutral-100);
  --text-muted:       var(--navy-200);
  --brand:            var(--neutral-0);      /* 深底上按钮反白 */
  --brand-hover:      var(--navy-100);
  --brand-active:     var(--navy-200);
  --text-on-brand:    var(--navy-800);
  --brand-subtle:     var(--navy-600);
  --brand-subtle-2:   var(--navy-500);
  --brand-focus-ring: var(--navy-400);
  --accent-mark:      var(--brass-300);
}

/* 深墨深 — 最深，用于 hero / 页脚 */
.t-ink {
  --surface:          var(--navy-800);
  --surface-raised:   var(--navy-700);
  --surface-sunken:   var(--navy-700);
  --surface-sunken-2: var(--navy-600);
  --border:           var(--navy-600);
  --border-strong:    var(--navy-500);
  --text:             var(--neutral-0);
  --text-secondary:   var(--neutral-100);
  --text-muted:       var(--navy-200);
  --brand:            var(--neutral-0);
  --brand-hover:      var(--navy-100);
  --brand-active:     var(--navy-200);
  --text-on-brand:    var(--navy-800);
  --brand-subtle:     var(--navy-700);
  --brand-subtle-2:   var(--navy-600);
  --brand-focus-ring: var(--navy-500);
  --accent-mark:      var(--brass-300);
}

/* 石墨深 — 中性深色，与藏青/深墨区分 */
.t-graphite {
  --surface:          var(--neutral-800);
  --surface-raised:   var(--neutral-700);
  --surface-sunken:   var(--neutral-700);
  --surface-sunken-2: oklch(34% 0.008 250);
  --border:           oklch(40% 0.008 250);
  --border-strong:    oklch(52% 0.009 250);
  --text:             var(--neutral-0);
  --text-secondary:   var(--neutral-100);
  --text-muted:       var(--neutral-300);
  --brand:            var(--neutral-0);
  --brand-hover:      var(--neutral-100);
  --brand-active:     var(--neutral-200);
  --text-on-brand:    var(--neutral-800);
  --brand-subtle:     var(--neutral-700);
  --brand-subtle-2:   oklch(40% 0.008 250);
  --brand-focus-ring: var(--neutral-500);
  --accent-mark:      var(--brass-300);
}