/* =======================================================
   RVHE / RUIHE · Self-hosted Font Face (Phase26)
   - Goal: unify Chinese glyph rendering across OS/browsers
   - Source: NotoSansSC-VariableFont_wght (user-provided)
   - NOTE: keep tokens untouched; only add @font-face declaration.
   ======================================================= */

@font-face {
  font-family: "Noto Sans SC";
  src:
    url("./fonts/NotoSansSC-VariableFont_wght.woff") format("woff"),
    url("./fonts/NotoSansSC-VariableFont_wght.ttf") format("truetype");
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}

/* =======================================================
   RVHE / RUIHE · Design Tokens · v1.1
   Rational Warmth × Architectural Neutrality
   只含 Token，不含组件样式
   ======================================================= */

:root {
  /* --------------------------------
   * 1. Brand Colors · 品牌基色
   * -------------------------------- */

  /* 核心品牌色 */
  --rh-navy: #0F1E3C;             /* C01 精英深蓝 · 标题 / 重点 */
  --rh-gold: #C5A065;             /* C02 价值金 / 哑光金 · 分割线 / 点缀 */
  --rh-charcoal: #333333;         /* C03 深炭灰 · 正文主色（严禁使用纯黑 #000） */
  --rh-platinum: #F4F4F6;         /* C04 铂金灰 · 页面背景 */
  --rh-platinum-light: #E3E4E8;   /* 辅助线 / 表单默认边框 */
  --rh-white: #FFFFFF;            /* C05 纯白 · 卡片 / 面板底色 */

  /* 状态色（非互联网红绿灯，而是酒店/咨询气质） */
  --rh-success: #2E5B4B;          /* Ivy Green · 成功 / 达成 */
  --rh-warning: #B07C36;          /* Cognac · 提示 / 风险 */
  --rh-error: #8E2129;            /* Burgundy · 错误 / 纠正 */
  --rh-danger: var(--rh-error);   /* Danger alias */
  --rh-info: #546E7A;             /* Slate Blue-Grey · 信息 */

  /* --------------------------------
   * 2. Semantic Colors · 语义颜色
   * -------------------------------- */

  /* 背景与容器 */
  --rh-color-page-bg: var(--rh-platinum);           /* 整页背景 */
  --rh-color-section-bg-default: var(--rh-platinum);/* 常规 section 底色 */
  --rh-color-card-bg: var(--rh-white);              /* 卡片 / 面板底色 */

  /* 文本颜色 */
  --rh-color-text-heading: var(--rh-navy);          /* 标题文字 */
  --rh-color-text-body: var(--rh-charcoal);         /* 正文文字 */
  --rh-color-text-muted: #666666;                   /* 说明文字 / 次级信息 */
  --rh-color-text-invert: var(--rh-white);          /* 深色底上的反白文字 */

  /* 边框 / 分割线 */
  --rh-color-divider-subtle: var(--rh-platinum-light);
  --rh-color-border-soft: var(--rh-platinum-light);
  --rh-color-border-strong: #D1D5DB;

  /* 表单 */
  --rh-color-input-border-default: var(--rh-platinum-light);
  --rh-color-input-border-focus: var(--rh-navy);
  --rh-color-input-border-error: var(--rh-error);
  --rh-color-input-bg: var(--rh-white);

  /* Toast / 提示 */
  --rh-color-toast-bg: var(--rh-white);
  --rh-color-toast-text: var(--rh-navy);
  --rh-color-toast-border-success: var(--rh-gold);

  /* CTA 反白模式（深蓝沉浸式） */
  --rh-color-cta-bg: #0F1E3C;                       /* 深蓝大底 */
  --rh-color-cta-text-main: #FFFFFF;                /* 主文案 · 纯白 */
  --rh-color-cta-text-muted: rgba(255, 255, 255, 0.8); /* 说明文案 · 高透白 */

  --rh-cta-button-bg: transparent;                  /* CTA 按钮默认幽灵态 */
  --rh-cta-button-border: 1px solid #FFFFFF;
  --rh-cta-button-text: #FFFFFF;

  --rh-cta-button-hover-bg: #FFFFFF;                /* Hover 反白实心 */
  --rh-cta-button-hover-text: #0F1E3C;


  /* Extended semantic colors · v55_foundation_cleanup_phase2
     仅为现有实现补充语义命名，不改变任何视觉数值 */
  --rh-color-navy-overlay-deep: #0b1730;        /* 深蓝 · 按钮 active 背景（如咨询提交按钮） */
  --rh-color-navy-overlay-mid: #15254c;         /* 深蓝 · 次级 hover 背景（如咨询提交按钮 hover） */
  --rh-color-navy-elevated: #152a4e;            /* 深蓝 · 提升态背景（主按钮 hover / CSR 触发展开） */

  --rh-color-text-soft: #4b5563;                /* 柔和标题/链接 hover 灰蓝（如行业洞察标题 hover） */
  --rh-color-text-label: #6B7280;               /* 标签 / 表单 Label / Footer 次级文字灰 */
  --rh-color-text-placeholder: #999999;         /* 表单浮动标签 / Hint 占位灰 */
  --rh-color-text-meta: #9CA3AF;                /* Meta / Caption / 日期等说明文字 */

  --rh-color-border-subtle-alt: #E5E7EB;        /* 细分割线灰（如洞察模块底部边框） */

  --rh-color-stat-accent: #86efac;              /* 统计数字 / 强调 Tag 使用的绿色高光 */

  /* Phase 3 · Tailwind / Footer semantic aliases
     (values copied from tailwind.config.extend.colors; do not change numerics) */
  --rh-footer-bg: #171a20;           /* footer-bg / rvhe-black */
  --rh-footer-bg-elevated: #0a0a0a;  /* footer-darker */
  --rh-footer-border: #333333;        /* footer-border / footer dividing line */
  --rh-color-text-strong-alt: #171a20;  /* text-rvhe-black on light surfaces */
  --rh-color-text-soft-alt: #5c5e62;     /* text-rvhe-gray on dark surfaces */
  --rh-color-border-light: #e5e5e5;    /* Tailwind border-light for subtle dividers */

  /* --------------------------------
   * 3. Typography · 字体与字阶
   * -------------------------------- */

  /* 字体族 */
  --rh-font-heading: "Montserrat", "Noto Sans SC", system-ui, -apple-system,
    BlinkMacSystemFont, "SF Pro Display", "Segoe UI", "Helvetica Neue",
    Arial, sans-serif;

  --rh-font-body: "Lato", "Noto Sans SC", system-ui, -apple-system,
    BlinkMacSystemFont, "SF Pro Text", "Segoe UI", "Helvetica Neue",
    Arial, sans-serif;

  /* 字号刻度（px） */
  --rh-font-size-display: 64px;   /* Hero / Slogan · 统治级标题 */
  --rh-font-size-h1: 48px;        /* Page / Section Title · 页面主标题 */
  --rh-font-size-h2: 32px;        /* Module Title · 模块标题 / 次级页面标题 */
  --rh-font-size-h3: 20px;        /* Card Title · 卡片标题 */
  --rh-font-size-h4: 16px;        /* 小标题 / Label 型标题 */

  --rh-font-size-body-lg: 18px;   /* 强调型正文（少用） */
  --rh-font-size-body: 15px;      /* 正文基准 */
  --rh-font-size-body-sm: 14px;   /* 次级说明 / Label */
  --rh-font-size-caption: 12px;   /* Caption / Meta / Tag */

  /* 行高（无单位倍数） */
  --rh-line-height-tight: 1.3;    /* Display / H1 · 紧凑 */
  --rh-line-height-snug: 1.45;    /* H2 / H3 · 微紧 */
  --rh-line-height-body: 1.8;     /* Body · 疏朗 */
  --rh-line-height-caption: 1.6;  /* Caption / Meta */
  /* 兼容旧名（可选） */
  --rh-line-height-relaxed: var(--rh-line-height-body);

  /* 字重 */
  --rh-font-weight-regular: 400;
  --rh-font-weight-medium: 500;
  --rh-font-weight-semibold: 600;
  --rh-font-weight-bold: 700;

  /* 语义文本（方便组件直接引用） */
  /* 章节抬头（Section Header） */
  --rh-section-title-font-size: var(--rh-font-size-h1);
  --rh-section-title-line-height: var(--rh-line-height-tight);
  --rh-section-title-font-weight: var(--rh-font-weight-bold);

  --rh-section-kicker-font-size: var(--rh-font-size-caption);
  --rh-section-kicker-letter-spacing: 0.16em;

  --rh-section-subtitle-font-size: var(--rh-font-size-body);
  --rh-section-subtitle-line-height: var(--rh-line-height-body);

  /* 卡片标题 / Meta */
  --rh-card-title-font-size: var(--rh-font-size-h3);
  --rh-card-title-line-height: var(--rh-line-height-snug);
  --rh-card-meta-font-size: var(--rh-font-size-caption);

  /* 正文与说明 */
  --rh-text-body-font-size: var(--rh-font-size-body);
  --rh-text-body-line-height: var(--rh-line-height-body);

  --rh-text-muted-font-size: var(--rh-font-size-body-sm);
  --rh-text-muted-line-height: var(--rh-line-height-body);

  /* 按钮 & All Caps Label */
  --rh-button-font-size: 14px;
  --rh-button-letter-spacing: 1px; /* 规则：ALL CAPS 必须 ≥ 1px 间距 */

  /* --------------------------------
   * 4. Spacing · 间距刻度
   * -------------------------------- */

  /* 基础刻度（px） · 4pt 系统 */
  --rh-space-0: 0px;
  --rh-space-1: 4px;
  --rh-space-2: 8px;
  --rh-space-3: 12px;
  --rh-space-4: 16px;
  --rh-space-5: 20px;
  --rh-space-6: 24px;
  --rh-space-7: 32px;
  --rh-space-8: 40px;
  --rh-space-9: 56px;

  /* Section 垂直节奏（Vertical Rhythm） */
  --rh-section-padding-desktop: 160px;   /* 桌面端 Section 上下留白 · 画廊感 */
  --rh-section-padding-mobile: 80px;     /* 移动端黄金节奏 */

  --rh-gap-section-desktop: var(--rh-section-padding-desktop);
  --rh-gap-section-mobile: var(--rh-section-padding-mobile);
  --rh-gap-section-inner: var(--rh-space-8);  /* 章节标题与内容之间 */

  /* 卡片间距（托盘式卡片） */
  --rh-gap-card-group: var(--rh-space-8);     /* 多张卡片之间的间距 */
  --rh-gap-card-inner-y: 48px;               /* Desktop 上下 padding */
  --rh-gap-card-inner-x: 40px;               /* Desktop 左右 padding */

  --rh-gap-card-inner-y-mobile: 32px;        /* Mobile 上下 padding */
  --rh-gap-card-inner-x-mobile: 24px;        /* Mobile 左右 padding */

  --rh-gap-card-title-body: var(--rh-space-4); /* 卡片标题与正文间距 */

  /* 表单字段间距（契约的仪式） */
  --rh-gap-form-field: 48px;

  /* 段落间距（正文段落之间） */
  --rh-gap-paragraph: var(--rh-space-6);

  /* 按钮组间距 */
  --rh-gap-button-group: var(--rh-space-6);

  /* --------------------------------
   * 5. Layout · 布局与断点
   * -------------------------------- */

  --rh-layout-max-width: 1200px;      /* 主内容最大宽度 */
  --rh-layout-reading-width: 720px;   /* 正文理想阅读宽度 */

  --rh-layout-gutter-desktop: 24px;   /* 桌面左右边距 */
  --rh-layout-gutter-mobile: 24px;    /* 移动左右边距 */

  /* 导航栏高度 */
  --rh-nav-height-desktop: 80px;
  --rh-nav-height-mobile: 56px;

  /* Hero 与下方内容之间的最小留白（可在布局中使用） */
  --rh-hero-bottom-gap-desktop: 120px; /* 可按需使用 */

  /* 断点（设计参考） */
  --rh-breakpoint-sm: 640px;
  --rh-breakpoint-md: 768px;
  --rh-breakpoint-lg: 960px;
  --rh-breakpoint-xl: 1200px;

  /* --------------------------------
   * 6. Radius · 圆角策略
   * -------------------------------- */

  --rh-radius-none: 0px;
  --rh-radius-xs: 2px;       /* 主圆角：按钮 / 卡片 / Modal / Toast */
  --rh-radius-sm: 4px;       /* 次级圆角：Tabs 轨道等少数使用 */
  --rh-radius-full: 999px;   /* Pill / Tag */

  /* 语义映射 */
  --rh-radius-card: var(--rh-radius-xs);     /* 卡片统一用 2px */
  --rh-radius-button: var(--rh-radius-xs);   /* 按钮统一 2px */
  --rh-radius-input: 0px;                    /* 契约式下划线表单无圆角 */
  --rh-radius-modal: var(--rh-radius-xs);

  /* 规范层建议：
   * - 禁止使用 8px / 12px 等中圆角
   * - 90% 组件使用 2px + 少量 4px + Pill
   */

  /* --------------------------------
   * 7. Shadows · 阴影体系
   * -------------------------------- */

  /* 所有阴影须基于 rgb(15,30,60)，禁止纯黑 */
  --rh-shadow-none: none;
  --rh-shadow-surface: 0 8px 20px rgba(15, 30, 60, 0.06);
  --rh-shadow-ambient: 0 20px 40px rgba(15, 30, 60, 0.08); /* Card Hover */
  --rh-shadow-button: 0 10px 20px rgba(15, 30, 60, 0.25);  /* Button */
  --rh-shadow-modal: 0 30px 60px rgba(15, 30, 60, 0.18);   /* Modal / Toast */

  /* 语义阴影 */
  --rh-shadow-card-default: var(--rh-shadow-none);
  --rh-shadow-card-hover: var(--rh-shadow-ambient);
  --rh-shadow-toast: var(--rh-shadow-modal);
  --rh-shadow-nav: var(--rh-shadow-surface);

  /* --------------------------------
   * 8. Motion · 动效与时间
   * -------------------------------- */

  /* 豪车刹车曲线 · 必须为默认曲线 */
  --rh-ease-luxury: cubic-bezier(0.25, 1, 0.5, 1);
  --rh-ease-standard: cubic-bezier(0.2, 0.0, 0.2, 1); /* 如需更理性的淡入淡出 */

  /* 时长刻度 */
  --rh-motion-fast: 0.2s;    /* 极少用：切换类 Toggle */
  --rh-motion-hover: 0.4s;   /* Hover 光影变化 · 推荐全站统一 */
  --rh-motion-page: 0.8s;    /* 布局/Section 级过渡 */
  --rh-motion-slow: 1.0s;    /* 特殊场景渐变 */

  /* 语义别名（方便引用） */
  --rh-duration-hover: var(--rh-motion-hover);
  --rh-duration-page: var(--rh-motion-page);

  /* 规范层建议：
   * - 禁止在组件内写随机 0.3s/0.5s
   * - 日常仅从 fast / hover / page / slow 中选择
   */

  /* --------------------------------
   * 9. Z-index · 层级管理
   * -------------------------------- */

  --rh-z-base: 1;
  --rh-z-nav: 100;
  --rh-z-overlay: 900;
  --rh-z-toast: 950;
  --rh-z-noise: 9999;
}