/* ============================================================
   小幸孕 · Design Tokens
   层级：primitive（原始值）→ semantic（语义）→ component（组件）
   命名统一 --xy-* ，颜色派生一律用 oklch()，不手造 hex。
   anchor: 主色调不可漂移（见 brand-spec.md）
   ============================================================ */

:root,
.xy-theme {
  /* ================= primitive · 原色 ================= */
  /* 品牌核心色（锚点） */
  --xy-pine-600: #1F5C55;           /* 主色 松青 */
  --xy-pine-700: #174A44;           /* 深主色 */
  --xy-pine-050: #E8F1ED;           /* 浅主色 */
  --xy-cloud: #F7F8F5;              /* 云白 */
  --xy-white: #FFFFFF;              /* 面板白 */
  --xy-ink-900: #203C3A;            /* 主文字 */
  --xy-ink-500: #596B66;            /* 次文字 */
  --xy-line: #D9E3DF;               /* 边线 */
  --xy-gold: #C6A36B;               /* 杏金 · 仅装饰 */

  /* 语义原始值 */
  --xy-ok-raw: #2E6951;  --xy-ok-bg-raw: #EAF4EE;
  --xy-info-raw: #285C87; --xy-info-bg-raw: #EDF3F8;
  --xy-warn-raw: #8A5B10; --xy-warn-bg-raw: #FBF3E4;
  --xy-danger-raw: #AD3E36; --xy-danger-bg-raw: #FBEDEC;
  --xy-unknown-raw: #596B66; --xy-unknown-bg-raw: #EFF2F0;
  --xy-focus-raw: #2E68B2;          /* 高对比焦点蓝 surface 上 5.62:1 */

  /* ==== 字体 ==== */
  --xy-font-serif: "Songti SC", "STSong", "Noto Serif CJK SC", "Source Han Serif SC", serif;
  --xy-font-sans: -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "WenQuanYi Micro Hei", "Segoe UI", Roboto, sans-serif;
  --xy-font-mono: "SF Mono", "Menlo", Consolas, "Liberation Mono", monospace;

  /* ==== 字阶（1.25 步进 + 显示级 clamp）==== */
  --xy-fs-xxs: 12px;   /* ≥12 辅助最小 */
  --xy-fs-xs: 13px;
  --xy-fs-sm: 14px;    /* 界面基准 */
  --xy-fs-md: 16px;    /* 正文 / 触控内容 */
  --xy-fs-lg: 18px;
  --xy-fs-xl: 20px;
  --xy-fs-2xl: 24px;
  --xy-fs-3xl: 30px;
  --xy-fs-4xl: clamp(28px, 4vw, 38px);
  --xy-fs-5xl: clamp(34px, 5vw, 48px);
  --xy-fs-6xl: clamp(42px, 7vw, 60px);
  --xy-fs-display: clamp(46px, 8vw, 72px);

  /* 行高（CJK 门槛） */
  --xy-lh-display: 1.3;             /* CJK 显示 ≥32px 必须 ≥1.3 */
  --xy-lh-heading: 1.35;
  --xy-lh-ui: 1.5;
  --xy-lh-body: 1.75;               /* CJK 正文 */

  /* 字距 */
  --xy-ls-body: 0;
  --xy-ls-ui: 0.02em;
  --xy-ls-caps: 0.08em;

  /* 字重 */
  --xy-fw-regular: 400;
  --xy-fw-medium: 510;
  --xy-fw-semibold: 600;

  /* ==== 间距（8px 基线）==== */
  --xy-sp-1: 4px;  --xy-sp-2: 8px;  --xy-sp-3: 12px; --xy-sp-4: 16px;
  --xy-sp-5: 24px; --xy-sp-6: 32px; --xy-sp-7: 40px; --xy-sp-8: 48px;
  --xy-sp-9: 64px; --xy-sp-10: 80px;

  /* ==== 圆角 ==== */
  --xy-radius-xs: 4px;  --xy-radius-sm: 6px;  --xy-radius-md: 8px;
  --xy-radius-lg: 12px; --xy-radius-xl: 16px; --xy-radius-2xl: 24px;
  --xy-radius-pill: 999px;

  /* ==== 描边 ==== */
  --xy-bw: 1px;
  --xy-bw-strong: 2px;

  /* ==== 阴影（极小，保持扁平）==== */
  --xy-shadow-none: none;
  --xy-shadow-sm: 0 1px 2px rgba(23, 74, 68, 0.06);
  --xy-shadow-md: 0 4px 14px rgba(23, 74, 68, 0.08);

  /* ==== 层级 ==== */
  --xy-z-base: 0; --xy-z-sticky: 100; --xy-z-overlay: 500;
  --xy-z-modal: 1000; --xy-z-toast: 1100;

  /* ==== 动效 ==== */
  --xy-dur-fast: 120ms; --xy-dur: 180ms; --xy-dur-slow: 260ms;
  --xy-ease: cubic-bezier(0.2, 0, 0, 1);
}

.xy-theme {
  /* ================= semantic · 语义 ================= */
  --xy-bg: var(--xy-cloud);
  --xy-surface: var(--xy-white);
  --xy-surface-soft: var(--xy-pine-050);
  --xy-surface-2: #F1F4F2;

  --xy-text: var(--xy-ink-900);
  --xy-text-strong: var(--xy-ink-900);
  --xy-text-muted: var(--xy-ink-500);
  --xy-text-inverse: var(--xy-white);
  --xy-text-on-accent: var(--xy-white);

  --xy-border: var(--xy-line);
  --xy-border-strong: #B7CAC2;

  --xy-accent: var(--xy-pine-600);
  --xy-accent-deep: var(--xy-pine-700);
  --xy-accent-soft: var(--xy-pine-050);

  --xy-gold-echo: var(--xy-gold);

  /* 语义状态（品牌色与风险语义分离） */
  --xy-ok: var(--xy-ok-raw); --xy-ok-bg: var(--xy-ok-bg-raw);
  --xy-info: var(--xy-info-raw); --xy-info-bg: var(--xy-info-bg-raw);
  --xy-warn: var(--xy-warn-raw); --xy-warn-bg: var(--xy-warn-bg-raw);
  --xy-danger: var(--xy-danger-raw); --xy-danger-bg: var(--xy-danger-bg-raw);
  --xy-unknown: var(--xy-unknown-raw); --xy-unknown-bg: var(--xy-unknown-bg-raw);

  /* 角色：family / staff / research 共用品牌；研究用中性蓝辅助 */
  --xy-role-staff: var(--xy-info-raw);    --xy-role-staff-bg: var(--xy-info-bg-raw);
  --xy-role-research: #33506F;            --xy-role-research-bg: #EDF2F7;

  /* 证据来源标签 */
  --xy-src-ai: #33506F;        --xy-src-ai-bg: #EDF2F7;
  --xy-src-report: var(--xy-info-raw);  --xy-src-report-bg: var(--xy-info-bg-raw);
  --xy-src-self: var(--xy-pine-600);    --xy-src-self-bg: var(--xy-pine-050);
  --xy-src-staff: var(--xy-warn-raw);   --xy-src-staff-bg: var(--xy-warn-bg-raw);

  /* 交互状态 */
  --xy-focus: var(--xy-focus-raw);
  --xy-focus-ring: 0 0 0 2px var(--xy-bg), 0 0 0 4px var(--xy-focus);
  --xy-disabled-bg: #ECEFF0;
  --xy-disabled-fg: var(--xy-ink-500);
  --xy-overlay: rgba(23, 74, 68, 0.32);

  /* ================= component · 组件 ================= */
  --xy-btn-primary-bg: var(--xy-pine-600);
  --xy-btn-primary-fg: var(--xy-white);
  --xy-btn-primary-hover: var(--xy-pine-700);
  --xy-btn-primary-active: var(--xy-pine-700);

  --xy-btn-secondary-bg: var(--xy-surface);
  --xy-btn-secondary-fg: var(--xy-pine-600);
  --xy-btn-secondary-hover-bg: var(--xy-pine-050);
  --xy-btn-secondary-active-bg: var(--xy-pine-050);
  --xy-btn-secondary-border: var(--xy-pine-600);

  --xy-btn-ghost-fg: var(--xy-text);
  --xy-btn-ghost-hover-bg: var(--xy-surface-2);
  --xy-btn-ghost-active-bg: var(--xy-pine-050);

  --xy-btn-danger-bg: var(--xy-danger);
  --xy-btn-danger-hover: var(--xy-danger);
  --xy-btn-danger-active: var(--xy-danger);

  --xy-field-bg: var(--xy-surface);
  --xy-field-bg-disabled: #F2F4F3;
  --xy-field-border: #7C9089; /* 输入边界，白底约3.37:1 */
  --xy-field-border-focus: var(--xy-focus);
  --xy-field-fg: var(--xy-text);
  --xy-field-fg-placeholder: var(--xy-text-muted);

  --xy-chip-bg: var(--xy-surface-2);
  --xy-chip-fg: var(--xy-text);
  --xy-chip-bg-active: var(--xy-pine-050);
  --xy-chip-fg-active: var(--xy-pine-600);
  --xy-chip-bg-selected: var(--xy-pine-600);
  --xy-chip-fg-selected: var(--xy-white);

  --xy-tab-fg: var(--xy-text-muted);
  --xy-tab-fg-active: var(--xy-pine-600);
  --xy-tab-indicator: var(--xy-pine-600);

  --xy-avatar-bg: var(--xy-pine-050);
  --xy-avatar-fg: var(--xy-pine-600);

  --xy-card-bg: var(--xy-surface);
  --xy-card-border: var(--xy-border);
  --xy-card-hover-border: var(--xy-border-strong);

  --xy-toast-bg: var(--xy-ink-900);
  --xy-toast-fg: var(--xy-white);

  --xy-skeleton-from: #EDF0EE;
  --xy-skeleton-to: #E1E7E4;
}

/* 旧微信 WebView 使用上面的实体色；支持相对颜色语法时再启用派生色。 */
@supports (color: oklch(from #1F5C55 l c h)) {
  :root, .xy-theme {
    --xy-btn-primary-hover: oklch(from var(--xy-pine-600) calc(L + 0.06) C H);
    --xy-btn-primary-active: oklch(from var(--xy-pine-600) calc(L - 0.05) C H);
    --xy-btn-secondary-hover-bg: oklch(from var(--xy-pine-050) calc(L - 0.03) C H);
    --xy-btn-secondary-active-bg: oklch(from var(--xy-pine-050) calc(L - 0.06) C H);
    --xy-btn-ghost-active-bg: oklch(from var(--xy-surface-2) calc(L - 0.04) C H);
    --xy-btn-danger-hover: oklch(from var(--xy-danger) calc(L + 0.06) C H);
    --xy-btn-danger-active: oklch(from var(--xy-danger) calc(L - 0.05) C H);
  }
}