/* Self-hosted CJK sans-serif — fallback when system font lacks CJK glyphs (iOS Simulator) */
@font-face {
  font-family: 'Noto Sans SC';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/NotoSansSC-Regular.ttf') format('truetype');
}
@font-face {
  font-family: 'Noto Sans SC';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/fonts/NotoSansSC-Bold.ttf') format('truetype');
}

/*
 * ═══════════════════════════════════════════════════════
 *  五粮液AI管家 — 设计配置（Design Tokens）
 *  所有前端视觉参数集中在此文件，改一处全局生效
 * ═══════════════════════════════════════════════════════
 */

:root {
  /* 告诉浏览器我们自己处理暗色模式，禁止 Chrome Auto Dark Mode 篡改颜色 */
  color-scheme: light dark;
  forced-color-adjust: none;

  /* ── Colors — Brand ──────────────────────────── */
  --color-brand: #8b6f47;
  --color-brand-dark: #5c3d2e;
  --color-brand-light: #a08968;

  /* ── Colors — Surface ────────────────────────── */
  --color-bg: #f5f5f0;  /* R=G=245, B=240 — 零红偏 */
  --color-surface: #fff;
  --color-surface-secondary: #f0f0eb;  /* R=G=240, B=235 — 零红偏 */
  --color-surface-hover: #ebebE6;  /* R=G=235, B=230 — 零红偏 */

  /* ── Colors — Text ───────────────────────────── */
  --color-text-primary: #3d2e1e;
  --color-text-secondary: #888;
  --color-text-tertiary: #aaa;
  --color-text-inverse: #fff;

  /* ── Colors — Border ─────────────────────────── */
  --color-border: #e0e0da;  /* R=G=224, B=218 — 零红偏 */
  --color-border-light: #eaeae4;  /* R=G=234, B=228 — 零红偏 */

  /* ── Colors — Status ─────────────────────────── */
  --color-success: #06C755;    /* LINE green */
  --color-error: #e74c3c;
  --color-warning: #f0ad4e;
  --color-info: #007AFF;

  /* ── Colors — Chat bubbles ───────────────────── */
  --color-bubble-ai: #f0f0eb;  /* 同 surface-secondary，零红偏 */
  --color-bubble-user: #3d2e1e;
  --color-bubble-user-text: #fff;

  /* ── Spacing — 8px grid ──────────────────────── */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;

  /* ── Radius — Fibonacci / Golden Ratio ──────────── */
  /* 5→8→13→21: each step ×φ (Apple continuous corner feel) */
  --radius-sm: 5px;
  --radius-md: 8px;
  --radius-lg: 13px;
  --radius-xl: 21px;
  --radius-full: 9999px;

  /* ── Typography ──────────────────────────────── */
  --font-family: "Noto Sans SC", -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, sans-serif;
  --font-family-serif: Georgia, 'Noto Serif SC', 'Songti SC', serif;
  --font-family-menu: 'STKaiti', 'KaiTi', 'Noto Serif SC', serif;
  --font-family-mono: 'SF Mono', 'Menlo', 'Consolas', monospace;
  --font-size-xs: 11px;
  --font-size-sm: 13px;
  --font-size-base: 15px;
  --font-size-md: 16px;
  --font-size-lg: 18px;
  --font-size-xl: 22px;
  --font-size-2xl: 28px;

  /* ── Card — 菜谱/骨架屏/邀请函统一 ──────────── */
  /* Golden ratio padding: vertical=21, horizontal=21×φ≈34 */
  --card-bg: #fafaf7;  /* R=G=250, B=247 — 零红偏 */
  --card-border-color: rgba(160, 160, 140, 0.2);  /* 中性暖灰边框 */
  --card-radius: 13px;  /* Fibonacci lg — proportional to card size, Apple-like */
  --card-padding: 21px 34px 34px;  /* top:side = 1:φ, side:bottom = 1:1, optical center shift ↑ */
  --card-shadow: 0 1px 2px rgba(120, 120, 100, 0.06), 0 4px 16px rgba(120, 120, 100, 0.04);  /* 中性阴影 */

  /* ── Motion ──────────────────────────────────── */
  --duration-fast: 150ms;
  --duration-normal: 250ms;
  --duration-slow: 400ms;
  --easing-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --easing-decelerate: cubic-bezier(0, 0, 0.2, 1);
  --easing-spring: cubic-bezier(0.68, -0.15, 0.265, 1.35);

  /* ── Shadows ─────────────────────────────────── */
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 10px 24px rgba(0, 0, 0, 0.12);

  /* ── Safe areas ──────────────────────────────── */
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
  --safe-right: env(safe-area-inset-right, 0px);

  /* ── Touch ───────────────────────────────────── */
  --touch-min: 44px;

  /* ── Colors — Accent (金色 + 印章红) ────────── */
  --color-gold: #D4A843;
  --color-gold-soft: #e8d5b7;
  --color-gold-muted: #8b7355;
  --color-seal: #C8102E;
  --color-seal-soft: #fce8e8;

  /* ── Colors — Banquet Status (6 阶段) ───────── */
  --status-draft: #f59e0b;
  --status-draft-bg: #fef3c7;
  --status-planned: #3b82f6;
  --status-planned-bg: #dbeafe;
  --status-confirmed: #10b981;
  --status-confirmed-bg: #d1fae5;
  --status-active: #8b5cf6;
  --status-active-bg: #ede9fe;
  --status-completed: #059669;
  --status-completed-bg: #ecfdf5;
  --status-cancelled: #ef4444;
  --status-cancelled-bg: #fef2f2;

  /* ── Ink Hierarchy (6 级灰度) ───────────────── */
  --ink-1: #111;
  --ink-2: #333;
  --ink-3: #666;
  --ink-4: #999;
  --ink-5: #bbb;
  --ink-6: #ddd;

  /* ── Font — 楷体 (批注/手写感) ──────────────── */
  --font-kai: 'LXGW WenKai Screen', 'STKaiti', 'KaiTi', serif;

  /* ── Font Weight (Open Props pattern) ──────── */
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  /* ── Line Height ───────────────────────────── */
  --line-height-tight: 1.2;    /* 标题 */
  --line-height-normal: 1.5;   /* 正文 */
  --line-height-relaxed: 1.8;  /* 宽松（菜谱列表） */

  /* ── Border Width ──────────────────────────── */
  --border-1: 1px;
  --border-2: 2px;

  /* ── Z-Index Layers ────────────────────────── */
  --z-base: 1;
  --z-dropdown: 100;
  --z-sticky: 200;
  --z-modal: 1000;
  --z-toast: 2000;
  --z-tooltip: 2100;

  /* ── Chart Colors (shadcn pattern, 数据可视化) ── */
  --chart-1: #D4A843;   /* 金色（品牌） */
  --chart-2: #27864A;   /* 绿色 */
  --chart-3: #3b82f6;   /* 蓝色 */
  --chart-4: #8b5cf6;   /* 紫色 */
  --chart-5: #ef4444;   /* 红色 */
}

/* ── Accessibility — reduced motion ───────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ── Dark mode overrides ───────────────────────── */
@media (prefers-color-scheme: dark) {
  :root {
    --color-bg: #181818;
    --color-surface: #222222;
    --color-surface-secondary: #2a2a2a;
    --color-surface-hover: #333333;
    --color-text-primary: #e5e5e0;
    --color-text-secondary: #888883;
    --color-text-tertiary: #66665f;
    --color-text-inverse: #181818;
    --color-border: #3a3a35;
    --color-border-light: #2e2e29;
    --color-bubble-ai: #2a2a2a;
    --color-bubble-user: #e5e5e0;
    --color-bubble-user-text: #181818;
    --card-bg: #222222;
    --card-border-color: #3a3a35;

    --color-gold: #D4A843;
    --color-gold-soft: #3a2f1e;
    --color-gold-muted: #8b7355;
    --color-seal: #e84057;
    --color-seal-soft: #3a1520;

    --status-draft-bg: #3a2a10;
    --status-planned-bg: #172554;
    --status-confirmed-bg: #052e16;
    --status-active-bg: #2e1065;
    --status-completed-bg: #052e16;
    --status-cancelled-bg: #450a0a;

    --ink-1: #f1f5f9;
    --ink-2: #e2e8f0;
    --ink-3: #94a3b8;
    --ink-4: #64748b;
    --ink-5: #475569;
    --ink-6: #334155;
  }
}