/**
 * 设计令牌（单一真相源）
 * - 默认：浅色主题（与当前线上视觉对齐）
 * - 扩展：设置 <html data-theme="dark"> 可切换暗色（默认不启用，避免破坏现有观感）
 */

:root,
[data-theme="light"] {
  /* ——— 品牌 / 主色 ——— */
  --color-brand: #618ea5;
  --color-brand-hover: #70887d;
  --color-brand-soft: #4a7288;
  --color-brand-muted: rgba(97, 142, 165, 0.14);
  --color-brand-border: rgba(97, 142, 165, 0.35);
  --color-brand-border-strong: rgba(97, 142, 165, 0.25);
  --color-link: #618ea5;

  /* ——— 背景渐变（JT / site） ——— */
  --color-gradient-1: #5a7767;
  --color-gradient-2: #979b88;
  --color-gradient-3: #5a6e77;
  --color-gradient-4: #7a96a3;
  --color-gradient-5: #6277826b;
  --color-gradient-start: var(--color-gradient-3);
  --color-gradient-mid1: var(--color-gradient-2);
  --color-gradient-mid2: var(--color-gradient-2);
  --color-gradient-mid3: var(--color-gradient-4);
  --color-gradient-end: var(--color-gradient-1);
  --color-theme: #5a7767;

  /* ——— 表面 / 背景 ——— */
  --color-surface: #ffffff;
  --color-surface-glass: rgba(255, 255, 255, 0.68);
  --color-surface-glass-strong: rgba(255, 255, 255, 0.85);
  --color-surface-glass-fallback: rgba(255, 255, 255, 0.95);
  --color-surface-muted: rgba(240, 242, 245, 0.82);
  --color-surface-muted-solid: #f0f2f5;
  --color-surface-hover: rgba(243, 244, 246, 0.9);
  --color-surface-action: rgba(240, 242, 245, 0.95);
  --color-page: #f3f4f6;
  --color-overlay: rgba(0, 0, 0, 0.4);
  --color-overlay-strong: rgba(0, 0, 0, 0.45);
  --color-skeleton-from: #f0f0f0;
  --color-skeleton-via: #e0e0e0;
  --color-handle: rgba(0, 0, 0, 0.12);
  --color-border-subtle: rgba(0, 0, 0, 0.06);
  --color-toast-close-hover: rgba(0, 0, 0, 0.06);

  /* ——— 灰阶（供 Tailwind gray-* 映射） ——— */
  --color-gray-50: #f9fafb;
  --color-gray-100: #f3f4f6;
  --color-gray-200: #e5e7eb;
  --color-gray-300: #d1d5db;
  --color-gray-500: #6b7280;
  --color-gray-600: #4b5563;
  --color-gray-700: #374151;
  --color-gray-800: #1f2937;
  --color-gray-900: #111827;

  /* ——— 文字 ——— */
  --color-text: rgba(17, 24, 39, 0.9);
  --color-text-solid: #111827;
  --color-text-secondary: #374151;
  --color-text-muted: #65676b;
  --color-text-subtle: #6b7280;
  --color-text-faint: #9ca3af;
  --color-text-on-brand: #ffffff;
  --color-text-on-gradient: rgba(255, 255, 255, 0.88);

  /* ——— 边框 ——— */
  --color-border: #e4e6eb;
  --color-border-strong: #d1d5db;
  --color-border-glass: rgba(255, 255, 255, 0.2);

  /* ——— 语义色 ——— */
  --color-success: #047857;
  --color-success-fg: #059669;
  --color-success-bg: #ecfdf5;
  --color-success-border: #a7f3d0;
  --color-danger: #dc2626;
  --color-danger-bg: #fef2f2;
  --color-danger-border: #fecaca;
  --color-danger-hover: #b91c1c;
  --color-danger-strong: var(--color-danger);
  --color-warning: #ea580c;
  --color-warning-fg: #b45309;
  --color-warning-bg: #fffbeb;
  --color-warning-fg-strong: #78350f;

  /* ——— 阴影 ——— */
  --shadow-glass: 0 12px 30px rgba(0, 0, 0, 0.1), 0 0 0 1px rgba(255, 255, 255, 0.15) inset;
  --shadow-md: 0 8px 25px rgba(0, 0, 0, 0.08);
  --shadow-toast: 0 8px 24px rgba(0, 0, 0, 0.14);
  --shadow-sheet: 0 -8px 32px rgba(0, 0, 0, 0.12);
  --shadow-title: 0 2px 14px rgba(0, 0, 0, 0.45);
  --shadow-subtitle: 0 2px 10px rgba(0, 0, 0, 0.35);

  /* ——— 圆角 ——— */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 12px;
  --radius-xl: 14px;
  --radius-2xl: 16px;
  --radius-sheet: 20px;
  --radius-pill: 999px;

  /* ——— 间距 ——— */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-3_5: 14px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --touch-min: 44px;
  --touch-comfort: 48px;

  /* ——— 字体 ——— */
  --font-sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial,
    "Noto Sans", "PingFang SC", "Microsoft YaHei", sans-serif;
  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.5rem;
  --text-2xl: 1.875rem;
  --text-input-mobile: 16px;
  --leading-tight: 1.25;
  --leading-snug: 1.3;
  --leading-normal: 1.45;

  /* ——— 动效 ——— */
  --duration-fast: 150ms;
  --duration-normal: 220ms;
  --duration-sheet: 280ms;
  --duration-enter: 180ms;
  --ease-out: ease;
  --bg-gradient-duration: 36s;

  /* ——— 层级（modal > sheet，避免确认框被回复 Sheet 盖住） ——— */
  --z-header: 90;
  --z-sheet: 1050;
  --z-toast: 1100;
  --z-modal: 1200;

  /* ——— 视口 / 键盘（由 viewport-inset.js 运行时写入） ——— */
  --vv-keyboard-inset: 0px;
  --vv-height: 100vh;
  --vv-offset-top: 0px;
  /* Toast 相对底边的基础抬升：躲开浏览器底栏 / 壳底栏 */
  --toast-lift: 22vh;
  --toast-lift-min: 72px;

  /*
   * 断点：与下方 @media / Tailwind screens 字面量保持一致。
   * 原生 CSS 媒体查询不能读自定义属性，改断点时请同步改 app.css 与 tailwind screens。
   */
  --breakpoint-md: 768px;
  --breakpoint-sm: 480px;
}

/* 暗色主题：仅在显式 data-theme="dark" 时生效，默认不自动切换 */
[data-theme="dark"] {
  --color-brand: #7aa8bc;
  --color-brand-hover: #8fa396;
  --color-brand-soft: #9bc0d0;
  --color-brand-muted: rgba(122, 168, 188, 0.18);
  --color-brand-border: rgba(122, 168, 188, 0.4);
  --color-brand-border-strong: rgba(122, 168, 188, 0.3);
  --color-link: #7aa8bc;

  --color-gradient-1: #2f3f38;
  --color-gradient-2: #3d4138;
  --color-gradient-3: #2c383e;
  --color-gradient-4: #354850;
  --color-gradient-5: #334048aa;
  --color-gradient-start: var(--color-gradient-3);
  --color-gradient-mid1: var(--color-gradient-2);
  --color-gradient-mid2: var(--color-gradient-2);
  --color-gradient-mid3: var(--color-gradient-4);
  --color-gradient-end: var(--color-gradient-1);
  --color-theme: #2f3f38;

  --color-surface: #1f2937;
  --color-surface-glass: rgba(31, 41, 55, 0.78);
  --color-surface-glass-strong: rgba(31, 41, 55, 0.9);
  --color-surface-glass-fallback: rgba(31, 41, 55, 0.96);
  --color-surface-muted: rgba(55, 65, 81, 0.85);
  --color-surface-muted-solid: #374151;
  --color-surface-hover: rgba(75, 85, 99, 0.9);
  --color-surface-action: rgba(55, 65, 81, 0.95);
  --color-page: #111827;
  --color-overlay: rgba(0, 0, 0, 0.55);
  --color-overlay-strong: rgba(0, 0, 0, 0.65);
  --color-skeleton-from: #374151;
  --color-skeleton-via: #4b5563;
  --color-handle: rgba(255, 255, 255, 0.18);
  --color-border-subtle: rgba(255, 255, 255, 0.08);
  --color-toast-close-hover: rgba(255, 255, 255, 0.1);

  --color-gray-50: #1f2937;
  --color-gray-100: #374151;
  --color-gray-200: #4b5563;
  --color-gray-300: #6b7280;
  --color-gray-500: #9ca3af;
  --color-gray-600: #d1d5db;
  --color-gray-700: #e5e7eb;
  --color-gray-800: #f3f4f6;
  --color-gray-900: #f9fafb;

  --color-text: rgba(243, 244, 246, 0.92);
  --color-text-solid: #f3f4f6;
  --color-text-secondary: #e5e7eb;
  --color-text-muted: #9ca3af;
  --color-text-subtle: #9ca3af;
  --color-text-faint: #6b7280;
  --color-text-on-brand: #ffffff;
  --color-text-on-gradient: rgba(255, 255, 255, 0.9);

  --color-border: #4b5563;
  --color-border-strong: #6b7280;
  --color-border-glass: rgba(255, 255, 255, 0.08);

  --color-success: #34d399;
  --color-success-fg: #34d399;
  --color-success-bg: rgba(6, 78, 59, 0.45);
  --color-success-border: rgba(52, 211, 153, 0.35);
  --color-danger: #ef4444;
  --color-danger-bg: rgba(127, 29, 29, 0.45);
  --color-danger-border: rgba(248, 113, 113, 0.35);
  --color-danger-hover: #f87171;
  --color-danger-strong: var(--color-danger);
  --color-warning: #fb923c;
  --color-warning-fg: #fbbf24;
  --color-warning-bg: rgba(120, 53, 15, 0.45);
  --color-warning-fg-strong: #fcd34d;

  --shadow-glass: 0 12px 30px rgba(0, 0, 0, 0.35), 0 0 0 1px rgba(255, 255, 255, 0.06) inset;
  --shadow-md: 0 8px 25px rgba(0, 0, 0, 0.3);
  --shadow-toast: 0 8px 24px rgba(0, 0, 0, 0.4);
  --shadow-sheet: 0 -8px 32px rgba(0, 0, 0, 0.4);
  --shadow-title: 0 2px 14px rgba(0, 0, 0, 0.55);
  --shadow-subtitle: 0 2px 10px rgba(0, 0, 0, 0.4);
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-fast: 0ms;
    --duration-normal: 0ms;
    --duration-sheet: 0ms;
    --duration-enter: 0ms;
    --bg-gradient-duration: 0s;
  }
}