/**
 * YOS 资料站 v9 · Design Tokens
 * Glow+Grain 航海图方言 · 夜晚海图室 + 羊皮纸档案 + 沙金发光
 * 
 * 合约来源: 2026-08-31-YOS-Promo-v9-Reconstruction.md §4
 * 审计规则: 任何页面 CSS 内不允许硬编码 hex，必须用 var(--xx)
 */

:root {
  /* ═══════════════════════════════════════════════════════════════
   * DEPTH · 深海三层（背景层级）
   * 意象: 深夜 11 点海图室的三层纵深
   * ═══════════════════════════════════════════════════════════════ */
  --depth-1: #03111E;           /* 最深 · 页面主背景 */
  --depth-2: #05253D;           /* 中层 · 卡片/区块背景 */
  --depth-3: #0A3258;           /* 浅层 · 悬浮元素/输入框 */

  /* ═══════════════════════════════════════════════════════════════
   * FOAM · 海沫白（文字层级）
   * 意象: 海浪拍击岩石后的白色泡沫
   * ═══════════════════════════════════════════════════════════════ */
  --foam: #EAF2FA;              /* 主文字 · 高对比 */
  --foam-mute: rgba(234, 242, 250, 0.65);   /* 次要文字 · 0.65 透明度 */
  --foam-muted: rgba(234, 242, 250, 0.65);  /* 别名 */
  --foam-dim: rgba(234, 242, 250, 0.4);     /* 辅助文字 · 0.4 透明度 */

  /* ═══════════════════════════════════════════════════════════════
   * GOLD · 沙金三色（强调/CTA/工分数值）
   * 意象: 海图上的烫金标注 · 仅在 CTA/高亮/工分使用
   * 语义限定: TabBar 选中态 + 工分数值 + 按钮 CTA + 下划线
   * ═══════════════════════════════════════════════════════════════ */
  --gold: #E8B45A;              /* 主沙金 · CTA 按钮/高亮 */
  --gold-soft: #FFCF6E;         /* 柔沙金 · hover 态/发光 */
  --gold-deep: #C98F38;         /* 深沙金 · 边框/阴影 */
  --gold-6: #C98F38;            /* 深沙金别名 */

  /* ═══════════════════════════════════════════════════════════════
   * PARCHMENT · 羊皮纸（档案/寄语/凭证类内容）
   * 意象: 老船长摊开的泛黄档案纸
   * 使用限定: 仅用于寄语/记录/建议/凭证类内容卡
   * ═══════════════════════════════════════════════════════════════ */
  --parchment: rgba(247, 241, 227, 0.94);     /* 羊皮纸底色 */
  --parchment-ink: #1F170C;                   /* 羊皮纸墨色文字 */
  --parchment-ink-muted: rgba(31, 23, 12, 0.65);  /* 羊皮纸次要文字 */
  --parchment-border: rgba(199, 143, 56, 0.3);    /* 羊皮纸边框 */
  --parchment-rule: rgba(199, 143, 56, 0.45); /* 羊皮纸分隔线 */

  /* ═══════════════════════════════════════════════════════════════
   * GLASS · 玻璃态三级（Float/Panel/Fill）
   * 意象: 海图室玻璃窗的三层透光
   * ═══════════════════════════════════════════════════════════════ */
  --glass-float: rgba(255, 255, 255, 0.04);   /* 最浅 · 悬浮提示 */
  --glass-panel: rgba(255, 255, 255, 0.08);   /* 中层 · 卡片面板 */
  --glass-fill: rgba(255, 255, 255, 0.12);    /* 最深 · 输入框/填充 */
  --glass-border: rgba(232, 180, 90, 0.22);   /* 玻璃边框 · 沙金色相 */

  /* ═══════════════════════════════════════════════════════════════
   * SEMANTIC · 语义色（状态反馈）
   * ═══════════════════════════════════════════════════════════════ */
  --ok-green: #7BDFA8;          /* 成功/通过 */
  --warn-red: #FF8A8A;          /* 警告/错误 */

  /* ═══════════════════════════════════════════════════════════════
   * MOTION · 动效曲线与时长
   * 物理动效铁律: scale(0.97) + cubic-bezier(0.4,0,0.2,1) 无回弹
   * ═══════════════════════════════════════════════════════════════ */
  --ease-state: cubic-bezier(0.4, 0, 0.2, 1);    /* 状态切换 · 无回弹 */
  --ease-pagein: cubic-bezier(0.22, 1, 0.36, 1); /* 页面进入 · 柔和 */
  --press-scale: 0.97;                            /* 按压缩放 */
  --dur-fast: 160ms;          /* 快速 · hover/active */
  --dur-base: 280ms;          /* 基础 · 一般过渡 */
  --dur-slow: 640ms;          /* 慢速 · 页面切换 */

  /* ═══════════════════════════════════════════════════════════════
   * SPACING · 间距网格（8px 基准）
   * ═══════════════════════════════════════════════════════════════ */
  --g-sm: 8px;     /* 小间距 · 图标与文字 */
  --g-md: 16px;    /* 中间距 · 元素内边距 */
  --g-lg: 24px;    /* 大间距 · 区块间距 */
  --g-xl: 40px;    /* 超大间距 · 章节间距 */
  --g-2xl: 80px;   /* 巨大间距 · 页面分区 */
  
  /* space 别名（兼容新页面） */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-8: 48px;
  --space-10: 64px;
  --space-12: 80px;
  --space-16: 128px;

  /* ═══════════════════════════════════════════════════════════════
   * TYPOGRAPHY · 字体大小
   * ═══════════════════════════════════════════════════════════════ */
  --text-xs: 12px;
  --text-sm: 14px;
  --text-base: 16px;
  --text-lg: 18px;
  --text-xl: 20px;
  --text-2xl: 24px;
  --text-3xl: 30px;
  --text-4xl: 36px;
  --text-5xl: 48px;

  /* ═══════════════════════════════════════════════════════════════
   * SAFE AREA · WebView 安全区（刘海屏/底部 Home Bar）
   * ═══════════════════════════════════════════════════════════════ */
  --safe-top: max(env(safe-area-inset-top), 44px);
  --safe-bottom: max(env(safe-area-inset-bottom), 88px);

  /* ═══════════════════════════════════════════════════════════════
   * MEASURE · 正文行宽上限（电脑端防难读）
   * ═══════════════════════════════════════════════════════════════ */
  --measure: 720px;

  /* ═══════════════════════════════════════════════════════════════
   * RADIUS · 圆角（非统一，按元素类型区分）
   * ═══════════════════════════════════════════════════════════════ */
  --radius-sm: 4px;    /* 小元素 · 标签/徽章 */
  --radius-md: 8px;    /* 中元素 · 按钮/输入框 */
  --radius-lg: 12px;   /* 大元素 · 卡片 */
  --radius-xl: 20px;   /* 超大元素 · 模态框 */
  --radius-1: 4px;     /* 别名 */
  --radius-2: 8px;     /* 别名 */
  --radius-3: 12px;    /* 别名 */
  --radius-4: 16px;    /* 别名 */

  /* ═══════════════════════════════════════════════════════════════
   * FONT · 字体族
   * ═══════════════════════════════════════════════════════════════ */
  --font-sans: "Noto Sans SC", "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
  --font-serif: "Noto Serif SC", serif;
  --font-mono: "JetBrains Mono", "SF Mono", Monaco, Consolas, monospace;

  /* ═══════════════════════════════════════════════════════════════
   * SHADOW · 阴影（煤油灯光晕感）
   * ═══════════════════════════════════════════════════════════════ */
  --shadow-float: 0 4px 20px rgba(0, 0, 0, 0.4);
  --shadow-panel: 0 8px 32px rgba(0, 0, 0, 0.5);
  --shadow-glow-gold: 0 0 20px rgba(232, 180, 90, 0.3);
}