/**
 * CEO AI Lab — Design System
 * 視覺基準：Experimental Prism × Generative Craft × Data Annotation
 * 與 PSF Corporate（Institutional）、CEO AI HUB（Graphite × Brass）刻意區隔
 * 動效基準：Alive but Quiet — 永遠在動，但不搶讀者的注意力
 */

:root {
  /* ---------- 底色：近黑，帶一點冷藍 ---------- */
  --lab-void:    #08090c;   /* 主畫布 */
  --lab-carbon:  #101218;   /* 卡片 */
  --lab-slate:   #1a1d26;   /* 浮起表面 */
  --lab-steel:   #262a36;   /* hover 表面 */
  --lab-line:    #333846;   /* divider */

  /* ---------- 文字 ---------- */
  --lab-white:      #f5f7fa;
  --lab-mute:       #9aa3b2;
  --lab-faint:      #5d6577;

  /* ---------- 四色分頻（Four Channels） ---------- */
  --ch-creative:  #ff5c8a;  /* 液態、不規則、變形 */
  --ch-marketing: #4dd8ff;  /* 波紋、擴散、訊號 */
  --ch-growth:    #7cf29b;  /* 節點、分支、網絡 */
  --ch-ai:        #b18cff;  /* 矩陣、神經、運算 */
  --ch-business:  #ffcc66;  /* 元素週期表的 Business Lab 用色 */

  --ch-creative-dim:  rgba(255, 92, 138, 0.14);
  --ch-marketing-dim: rgba(77, 216, 255, 0.14);
  --ch-growth-dim:    rgba(124, 242, 155, 0.14);
  --ch-ai-dim:        rgba(177, 140, 255, 0.14);
  --ch-business-dim:  rgba(255, 204, 102, 0.14);

  /* ---------- 主色：單一螢光綠（v1.2） ----------
     取代原本的五色稜鏡漸層，作為全站唯一的品牌強調色。
     三個色階做出「深→亮→發光」的層次，讓按鈕、文字漸層、邊框
     仍有玻璃感的光澤，而不是死板的單一色塊。
     四色分頻（--ch-*）保留不動：那是週期表／人才池／公式節點
     用來區分四個 Lab 的功能色，不是品牌裝飾色。 */
  --neon-deep:   #00341b;
  --neon:        #00c96a;
  --neon-bright: #7dffc0;
  --neon-dim:    rgba(0, 201, 106, 0.14);

  --lab-prism: linear-gradient(115deg, var(--neon-deep), var(--neon), var(--neon-bright));
  --lab-prism-soft: linear-gradient(115deg,
      rgba(0, 52, 27, .5), rgba(0, 201, 106, .5), rgba(125, 255, 192, .5));

  /* ---------- 語意 token ---------- */
  --surface:         var(--lab-void);
  --surface-raised:  var(--lab-carbon);
  --surface-hover:   var(--lab-slate);
  --surface-active:  var(--lab-steel);
  --text-primary:    var(--lab-white);
  --text-secondary:  var(--lab-mute);
  --text-tertiary:   var(--lab-faint);
  --rule:            rgba(245, 247, 250, 0.08);
  --rule-strong:     rgba(245, 247, 250, 0.20);
  --accent:          var(--neon);
  --focus-ring:      var(--neon-bright);
  --control-bg:      var(--lab-carbon);
  --control-line:    rgba(245, 247, 250, 0.16);
  --shadow-sm: 0 8px 24px rgba(0, 0, 0, 0.5);
  --shadow-md: 0 24px 64px rgba(0, 0, 0, 0.6);

  /* ---------- Header (固定高) ---------- */
  --header-h: 68px;

  /* ---------- 字型（自架優先，網路字型為可選增強） ---------- */
  --font-display: 'Source Serif 4', 'Source Serif 4 Variable', Georgia, 'Times New Roman', serif;
  --font-sans: 'Noto Sans TC', 'PingFang TC', 'Microsoft JhengHei', -apple-system, 'Segoe UI', sans-serif;
  --font-mono: 'JetBrains Mono', 'JetBrains Mono Variable', 'SF Mono', Consolas, 'Courier New', monospace;

  /* ---------- 字級 ---------- */
  --fs-display: clamp(3.25rem, 2rem + 5.5vw, 8rem);
  --fs-h1:      clamp(2.25rem, 1.7rem + 2.4vw, 4rem);
  --fs-h2:      clamp(1.75rem, 1.4rem + 1.6vw, 2.75rem);
  --fs-h3:      clamp(1.25rem, 1.1rem + 0.8vw, 1.625rem);
  --fs-lead:    clamp(1.0625rem, 1rem + 0.4vw, 1.3125rem);
  --fs-body:    1rem;
  --fs-caption: 0.8125rem;
  --fs-micro:   0.6875rem;   /* mono 標註專用 */

  --lh-tight: 1.05;
  --lh-snug: 1.3;
  --lh-body: 1.7;

  --ls-eyebrow: 0.22em;
  --ls-wide: 0.08em;
  --ls-tight: -0.02em;

  /* ---------- 間距（8px 基準） ---------- */
  --space-1: 0.5rem;  --space-2: 1rem;   --space-3: 1.5rem;
  --space-4: 2rem;    --space-5: 3rem;   --space-6: 4rem;
  --space-7: 6rem;    --space-8: 8rem;
  --space-section: clamp(5rem, 3.5rem + 7vw, 9.5rem);

  /* ---------- 版面 ---------- */
  --container-max: 1440px;
  --container-pad: clamp(1.25rem, 4vw, 4rem);
  --content-max: 720px;
  --radius-sm: 2px;
  --radius-md: 6px;
  --radius-lg: 14px;

  /* ---------- Motion ---------- */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-inout: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 200ms;
  --dur-base: 420ms;
  --dur-slow: 800ms;

  color-scheme: dark;
}

@media (prefers-reduced-motion: reduce) {
  :root { --dur-fast: 1ms; --dur-base: 1ms; --dur-slow: 1ms; }
}