/* ==========================================================================
 * 船联汇 VesselNexus — Brand Design Tokens (B1 Scheme)
 * ==========================================================================
 * B1 方案定位: "深蓝信赖 · 金色链接" — Deep Blue Trust × Golden Links
 *
 * 设计语义:
 *   深海蓝 (Deep Ocean)   → 全球化、权威、信赖、技术深度
 *   金橙黄 (Trade Gold)    → 交易活力、链接价值、温暖商业
 *   岩石灰 (Hull Gray)     → 稳重、中性、专业
 *   云白 (Foam White)      → 纯净、透明、信息清晰
 *
 * Version: 1.0.0
 * ========================================================================== */

:root {
  /* ═══════════════════════════════════════════════════════════════════════
    1. BRAND PRIMITIVES — 品牌原色
     ═══════════════════════════════════════════════════════════════════════ */
  --vnx-ocean-950: #0a1628;   /* 最深海 — 主背景暗色 */
  --vnx-ocean-900: #0d1f3c;   /* 深海 — hover 背景 */
  --vnx-ocean-800: #112952;   /* 深蓝 — 边框、分隔 */
  --vnx-ocean-700: #163a6b;   /* 中深蓝 — 次级元素 */
  --vnx-ocean-600: #1b4d85;   /* 中蓝 — 品牌主色 */
  --vnx-ocean-500: #1e5a9e;   /* 品牌主色(亮) */
  --vnx-ocean-400: #2e7bc4;   /* 浅蓝 — 交互、链接 */
  --vnx-ocean-300: #5a9fd4;   /* 浅蓝 — hover 状态 */
  --vnx-ocean-200: #a3c9e8;   /* 极浅蓝 — 背景色块 */
  --vnx-ocean-100: #d9e8f5;   /* 雾蓝 — 页面底色 */
  --vnx-ocean-50:  #edf4fa;   /* 冰蓝 — 卡片背景 */

  --vnx-gold-900:  #7a5500;   /* 深金 — 极少用 */
  --vnx-gold-700:  #b88400;   /* 中金 — 边框高亮 */
  --vnx-gold-500:  #d4980a;   /* 品牌金 — 强调、CTA */
  --vnx-gold-400:  #f0b31e;   /* 亮金 — hover */
  --vnx-gold-300:  #f7c948;   /* 浅金 — 标签 */
  --vnx-gold-200:  #fce08a;   /* 极浅金 — 背景 */
  --vnx-gold-100:  #fef3d0;   /* 奶油金 — 卡片 */
  --vnx-gold-50:   #fff9e6;   /* 晨曦金 — 提示背景 */

  --vnx-gray-900: #1a1a2e;   /* 正文黑 */
  --vnx-gray-800: #2d2d44;   /* 深灰 — 标题 */
  --vnx-gray-700: #4a4a5e;   /* 中深灰 */
  --vnx-gray-600: #6b6b7e;   /* 中灰 — 次要文字 */
  --vnx-gray-500: #8e8e9e;   /* 灰 — placeholder */
  --vnx-gray-400: #b0b0be;   /* 浅灰 — 边框 */
  --vnx-gray-300: #d0d0da;   /* 极浅灰 — 分隔线 */
  --vnx-gray-200: #e8e8ee;   /* 背景灰 */
  --vnx-gray-100: #f4f4f7;   /* 页面灰底 */
  --vnx-gray-50:  #fafafb;   /* 近白 */

  --vnx-red-500:    #d93636;   /* 警示红 */
  --vnx-red-100:    #fce8e8;   /* 警示红底 */
  --vnx-green-500:  #219653;   /* 成功绿 */
  --vnx-green-100:  #e6f7ee;   /* 成功绿底 */
  --vnx-white:      #ffffff;
  --vnx-black:      #0a0a14;

  /* ═══════════════════════════════════════════════════════════════════════
    2. SEMANTIC TOKENS — 语义令牌
     ═══════════════════════════════════════════════════════════════════════ */

  /* ── 品牌角色分配 ── */
  --vnx-color-brand-primary:      var(--vnx-ocean-600);
  --vnx-color-brand-primary-dark: var(--vnx-ocean-900);
  --vnx-color-brand-primary-light:var(--vnx-ocean-200);
  --vnx-color-brand-accent:       var(--vnx-gold-500);
  --vnx-color-brand-accent-light: var(--vnx-gold-200);
  --vnx-color-brand-accent-hover: var(--vnx-gold-400);

  /* ── 表面 & 背景 ── */
  --vnx-surface-page:       var(--vnx-gray-100);
  --vnx-surface-card:       var(--vnx-white);
  --vnx-surface-header:     var(--vnx-ocean-950);
  --vnx-surface-header-sticky: rgba(10, 22, 40, 0.97);
  --vnx-surface-footer:     var(--vnx-ocean-900);
  --vnx-surface-highlight:  var(--vnx-gold-50);
  --vnx-surface-overlay:    rgba(10, 22, 40, 0.72);

  /* ── 文字 ── */
  --vnx-text-primary:    var(--vnx-gray-900);
  --vnx-text-secondary:  var(--vnx-gray-600);
  --vnx-text-tertiary:   var(--vnx-gray-500);
  --vnx-text-inverse:    var(--vnx-white);
  --vnx-text-link:       var(--vnx-ocean-400);
  --vnx-text-link-hover: var(--vnx-ocean-300);
  --vnx-text-accent:     var(--vnx-gold-500);

  /* ── 边框 & 分隔 ── */
  --vnx-border-default:  var(--vnx-gray-300);
  --vnx-border-light:    var(--vnx-gray-200);
  --vnx-border-accent:   var(--vnx-gold-300);
  --vnx-border-focus:    var(--vnx-ocean-400);

  /* ── 状态 ── */
  --vnx-color-success:       var(--vnx-green-500);
  --vnx-color-success-bg:    var(--vnx-green-100);
  --vnx-color-danger:        var(--vnx-red-500);
  --vnx-color-danger-bg:     var(--vnx-red-100);
  --vnx-color-warning:       var(--vnx-gold-500);
  --vnx-color-warning-bg:    var(--vnx-gold-100);
  --vnx-color-info:          var(--vnx-ocean-400);
  --vnx-color-info-bg:       var(--vnx-ocean-100);

  /* ═══════════════════════════════════════════════════════════════════════
    3. TYPOGRAPHY — 字体系统
     ═══════════════════════════════════════════════════════════════════════ */
  --vnx-font-family-display:  'DM Serif Display', 'Noto Serif SC', Georgia, 'Times New Roman', serif;
  --vnx-font-family-heading:  'Inter', 'Noto Sans SC', -apple-system, BlinkMacSystemFont, sans-serif;
  --vnx-font-family-body:     'Inter', 'Noto Sans SC', -apple-system, BlinkMacSystemFont, sans-serif;
  --vnx-font-family-mono:     'JetBrains Mono', 'Fira Code', 'Consolas', monospace;

  /* ── 字号梯度 (基于 1rem = 16px 的 modular scale 1.25) ── */
  --vnx-text-xs:   0.64rem;   /* 10.24px — 法律小字、标签小注 */
  --vnx-text-sm:   0.8rem;    /* 12.8px  — 辅助文字、时间戳 */
  --vnx-text-base: 1rem;      /* 16px    — 正文 */
  --vnx-text-md:   1.125rem;  /* 18px    — 强调正文 */
  --vnx-text-lg:   1.25rem;   /* 20px    — 小标题 */
  --vnx-text-xl:   1.563rem;  /* 25px    — H4 */
  --vnx-text-2xl:  1.953rem;  /* 31.25px — H3 */
  --vnx-text-3xl:  2.441rem;  /* 39.06px — H2 */
  --vnx-text-4xl:  3.052rem;  /* 48.83px — H1 */
  --vnx-text-5xl:  3.815rem;  /* 61.04px — Hero 大标题 */

  /* ── 字重 ── */
  --vnx-font-light:    300;
  --vnx-font-regular:  400;
  --vnx-font-medium:   500;
  --vnx-font-semibold: 600;
  --vnx-font-bold:     700;
  --vnx-font-extrabold:800;

  /* ── 行高 ── */
  --vnx-leading-tight:  1.2;
  --vnx-leading-snug:   1.375;
  --vnx-leading-normal: 1.6;
  --vnx-leading-relaxed:1.75;

  /* ── 字间距 ── */
  --vnx-tracking-tight:  -0.02em;
  --vnx-tracking-normal:  0;
  --vnx-tracking-wide:    0.03em;
  --vnx-tracking-wider:   0.08em;

  /* ═══════════════════════════════════════════════════════════════════════
    4. SPACING — 间距系统 (基于 4px 网格)
     ═══════════════════════════════════════════════════════════════════════ */
  --vnx-space-0:   0;
  --vnx-space-1:   0.25rem;   /* 4px */
  --vnx-space-2:   0.5rem;    /* 8px */
  --vnx-space-3:   0.75rem;   /* 12px */
  --vnx-space-4:   1rem;      /* 16px */
  --vnx-space-5:   1.25rem;   /* 20px */
  --vnx-space-6:   1.5rem;    /* 24px */
  --vnx-space-8:   2rem;      /* 32px */
  --vnx-space-10:  2.5rem;    /* 40px */
  --vnx-space-12:  3rem;      /* 48px */
  --vnx-space-14:  3.5rem;    /* 56px */
  --vnx-space-16:  4rem;      /* 64px */
  --vnx-space-20:  5rem;      /* 80px */
  --vnx-space-24:  6rem;      /* 96px */

  /* ═══════════════════════════════════════════════════════════════════════
    5. RADIUS — 圆角
     ═══════════════════════════════════════════════════════════════════════ */
  --vnx-radius-sm:    4px;
  --vnx-radius-md:    8px;
  --vnx-radius-lg:    12px;
  --vnx-radius-xl:    16px;
  --vnx-radius-2xl:   24px;
  --vnx-radius-full:  9999px;

  /* ═══════════════════════════════════════════════════════════════════════
    6. SHADOWS — 阴影层级
     ═══════════════════════════════════════════════════════════════════════ */
  --vnx-shadow-xs: 0 1px 2px rgba(10, 22, 40, 0.05);
  --vnx-shadow-sm: 0 1px 3px rgba(10, 22, 40, 0.08), 0 1px 2px rgba(10, 22, 40, 0.06);
  --vnx-shadow-md: 0 4px 6px -1px rgba(10, 22, 40, 0.08), 0 2px 4px -2px rgba(10, 22, 40, 0.05);
  --vnx-shadow-lg: 0 10px 15px -3px rgba(10, 22, 40, 0.1), 0 4px 6px -4px rgba(10, 22, 40, 0.06);
  --vnx-shadow-xl: 0 20px 25px -5px rgba(10, 22, 40, 0.12), 0 8px 10px -6px rgba(10, 22, 40, 0.08);
  --vnx-shadow-2xl: 0 25px 50px -12px rgba(10, 22, 40, 0.25);
  --vnx-shadow-glow-gold: 0 0 20px rgba(212, 152, 10, 0.3);
  --vnx-shadow-glow-ocean: 0 0 20px rgba(27, 77, 133, 0.3);

  /* ═══════════════════════════════════════════════════════════════════════
    7. TRANSITIONS — 过渡动画
     ═══════════════════════════════════════════════════════════════════════ */
  --vnx-ease-out:     cubic-bezier(0.16, 1, 0.3, 1);
  --vnx-ease-in-out:  cubic-bezier(0.65, 0, 0.35, 1);
  --vnx-ease-spring:  cubic-bezier(0.34, 1.56, 0.64, 1);
  --vnx-duration-fast:    150ms;
  --vnx-duration-normal:  250ms;
  --vnx-duration-slow:    400ms;
  --vnx-duration-slower:  600ms;

  /* ═══════════════════════════════════════════════════════════════════════
    8. LAYOUT — 布局
     ═══════════════════════════════════════════════════════════════════════ */
  --vnx-header-height:         72px;    /* PC 端页眉高度 */
  --vnx-header-height-mobile:  56px;    /* 移动端页眉高度 */
  --vnx-header-height-scrolled:60px;    /* 滚动后压缩高度 */
  --vnx-sidebar-width:         280px;
  --vnx-content-max-width:     1280px;
  --vnx-content-narrow:        720px;
  --vnx-container-padding:     var(--vnx-space-6);

  /* ═══════════════════════════════════════════════════════════════════════
    9. BREAKPOINTS (用于参考，实际使用媒体查询)
     ═══════════════════════════════════════════════════════════════════════ */
  /*
   * xs: < 480px   (手机竖屏)
   * sm: ≥ 480px   (手机横屏 / 大屏手机)
   * md: ≥ 768px   (平板)
   * lg: ≥ 1024px  (小桌面 / 平板横屏)
   * xl: ≥ 1280px  (标准桌面)
   * 2xl: ≥ 1536px (大桌面)
   */
}

/* ═══════════════════════════════════════════════════════════════════════
   10. DARK MODE OVERRIDES (预留)
   ═══════════════════════════════════════════════════════════════════════ */
/* @media (prefers-color-scheme: dark) { ... } — 阶段性迭代 */