/* MailHub Local — Design Tokens
   原型 colors_and_type.css 抽出，所有页面共享。
   含：中性灰 + 青蓝(teal)调色板、语义 token、深色模式、语义类回退。
*/

:root {
  /* Neutral scale */
  --mail-neutral-0: #ffffff;
  --mail-neutral-50: #f8f9fb;
  --mail-neutral-100: #f1f3f6;
  --mail-neutral-200: #e3e7ec;
  --mail-neutral-300: #c8cdd4;
  --mail-neutral-400: #9ba3ad;
  --mail-neutral-500: #6b7280;
  --mail-neutral-600: #4b5563;
  --mail-neutral-700: #374151;
  --mail-neutral-800: #1f2937;
  --mail-neutral-900: #111827;

  /* Primary teal-blue */
  --mail-primary-50: #effbfa;
  --mail-primary-100: #d7f4f2;
  --mail-primary-200: #b2e8e5;
  --mail-primary-300: #7ed6d2;
  --mail-primary-400: #44bbb6;
  --mail-primary-500: #2a9d98;
  --mail-primary-600: #1f7d7a;
  --mail-primary-700: #1d6462;
  --mail-primary-800: #1b4f4e;
  --mail-primary-900: #1a4241;

  /* Semantic tokens */
  --mail-background: var(--mail-neutral-50);
  --mail-foreground: var(--mail-neutral-900);
  --mail-card: var(--mail-neutral-0);
  --mail-card-foreground: var(--mail-neutral-900);
  --mail-popover: var(--mail-neutral-0);
  --mail-popover-foreground: var(--mail-neutral-900);
  --mail-primary: var(--mail-primary-600);
  --mail-primary-foreground: var(--mail-neutral-0);
  --mail-secondary: var(--mail-neutral-100);
  --mail-secondary-foreground: var(--mail-neutral-700);
  --mail-muted: var(--mail-neutral-100);
  --mail-muted-foreground: var(--mail-neutral-500);
  --mail-accent: var(--mail-primary-50);
  --mail-accent-foreground: var(--mail-primary-800);
  --mail-destructive: #dc2626;
  --mail-destructive-foreground: var(--mail-neutral-0);
  --mail-border: var(--mail-neutral-200);
  --mail-input: var(--mail-neutral-200);
  --mail-ring: var(--mail-primary-400);

  /* Surface layering */
  --mail-surface: var(--mail-neutral-0);
  --mail-surface-2: var(--mail-neutral-100);
  --mail-ink: var(--mail-neutral-900);
  --mail-ink-2: var(--mail-neutral-600);
  --mail-ink-3: var(--mail-neutral-400);
  --mail-line: var(--mail-neutral-200);

  /* Radius */
  --mail-radius-sm: 4px;
  --mail-radius-md: 8px;
  --mail-radius-lg: 12px;
  --mail-radius-xl: 16px;
  --mail-radius-pill: 999px;

  /* Shadows */
  --mail-shadow-1: 0 1px 2px rgba(17, 24, 39, 0.05), 0 1px 1px rgba(17, 24, 39, 0.03);
  --mail-shadow-2: 0 8px 24px -8px rgba(17, 24, 39, 0.14);
  --mail-shadow-3: 0 24px 60px -20px rgba(17, 24, 39, 0.22);

  /* State colors */
  --mail-state-success: #16a34a;
  --mail-state-warning: #d97706;
  --mail-state-error: #dc2626;
  --mail-state-info: #2563eb;

  /* Typography */
  --mail-font-sans: Inter, "Noto Sans SC", "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
  --mail-font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
}

/* Dark mode */
.dark {
  --mail-background: #0c0f13;
  --mail-foreground: #f8f9fb;
  --mail-card: #14181f;
  --mail-card-foreground: #f8f9fb;
  --mail-popover: #14181f;
  --mail-popover-foreground: #f8f9fb;
  --mail-primary: var(--mail-primary-400);
  --mail-primary-foreground: var(--mail-neutral-900);
  --mail-secondary: #1f2937;
  --mail-secondary-foreground: #e3e7ec;
  --mail-muted: #1f2937;
  --mail-muted-foreground: #9ba3ad;
  --mail-accent: rgba(42, 157, 152, 0.15);
  --mail-accent-foreground: var(--mail-primary-200);
  --mail-border: #27313c;
  --mail-input: #27313c;
  --mail-ring: var(--mail-primary-500);
  --mail-surface: #14181f;
  --mail-surface-2: #1f2937;
  --mail-ink: #f8f9fb;
  --mail-ink-2: #c8cdd4;
  --mail-ink-3: #6b7280;
  --mail-line: #27313c;

  /* 暗色模式下状态颜色调亮，确保在深色背景上可读 */
  --mail-state-success: #4ade80;
  --mail-state-warning: #fbbf24;
  --mail-state-error: #f87171;
  --mail-state-info: #60a5fa;
  --mail-destructive: #f87171;
  --mail-destructive-foreground: var(--mail-neutral-900);

  /* 暗色模式下阴影调整 */
  --mail-shadow-1: 0 1px 2px rgba(0, 0, 0, 0.3), 0 1px 1px rgba(0, 0, 0, 0.2);
  --mail-shadow-2: 0 8px 24px -8px rgba(0, 0, 0, 0.5);
  --mail-shadow-3: 0 24px 60px -20px rgba(0, 0, 0, 0.6);
}

/* 语义类回退：让 bg-card / text-foreground 等 Tailwind 语义工具类
   在 Tailwind 浏览器构建未生成时也能直接生效（直接用 var）。 */
.bg-background { background-color: var(--mail-background); }
.text-background { color: var(--mail-background); }
.border-background { border-color: var(--mail-background); }
.bg-foreground { background-color: var(--mail-foreground); }
.text-foreground { color: var(--mail-foreground); }
.border-foreground { border-color: var(--mail-foreground); }
.bg-card { background-color: var(--mail-card); }
.text-card { color: var(--mail-card); }
.border-card { border-color: var(--mail-card); }
.bg-card-foreground { background-color: var(--mail-card-foreground); }
.text-card-foreground { color: var(--mail-card-foreground); }
.border-card-foreground { border-color: var(--mail-card-foreground); }
.bg-popover { background-color: var(--mail-popover); }
.text-popover { color: var(--mail-popover); }
.border-popover { border-color: var(--mail-popover); }
.bg-popover-foreground { background-color: var(--mail-popover-foreground); }
.text-popover-foreground { color: var(--mail-popover-foreground); }
.border-popover-foreground { border-color: var(--mail-popover-foreground); }
.bg-primary { background-color: var(--mail-primary); }
.text-primary { color: var(--mail-primary); }
.border-primary { border-color: var(--mail-primary); }
.bg-primary-foreground { background-color: var(--mail-primary-foreground); }
.text-primary-foreground { color: var(--mail-primary-foreground); }
.border-primary-foreground { border-color: var(--mail-primary-foreground); }
.bg-secondary { background-color: var(--mail-secondary); }
.text-secondary { color: var(--mail-secondary); }
.border-secondary { border-color: var(--mail-secondary); }
.bg-secondary-foreground { background-color: var(--mail-secondary-foreground); }
.text-secondary-foreground { color: var(--mail-secondary-foreground); }
.border-secondary-foreground { border-color: var(--mail-secondary-foreground); }
.bg-muted { background-color: var(--mail-muted); }
.text-muted { color: var(--mail-muted); }
.border-muted { border-color: var(--mail-muted); }
.bg-muted-foreground { background-color: var(--mail-muted-foreground); }
.text-muted-foreground { color: var(--mail-muted-foreground); }
.border-muted-foreground { border-color: var(--mail-muted-foreground); }
.bg-accent { background-color: var(--mail-accent); }
.text-accent { color: var(--mail-accent); }
.border-accent { border-color: var(--mail-accent); }
.bg-accent-foreground { background-color: var(--mail-accent-foreground); }
.text-accent-foreground { color: var(--mail-accent-foreground); }
.border-accent-foreground { border-color: var(--mail-accent-foreground); }
.bg-destructive { background-color: var(--mail-destructive); }
.text-destructive { color: var(--mail-destructive); }
.border-destructive { border-color: var(--mail-destructive); }
.bg-destructive-foreground { background-color: var(--mail-destructive-foreground); }
.text-destructive-foreground { color: var(--mail-destructive-foreground); }
.border-destructive-foreground { border-color: var(--mail-destructive-foreground); }
.bg-border { background-color: var(--mail-border); }
.border-border { border-color: var(--mail-border); }
.bg-input { background-color: var(--mail-input); }
.border-input { border-color: var(--mail-input); }
.bg-ring { background-color: var(--mail-ring); }
.text-ring { color: var(--mail-ring); }
.border-ring { border-color: var(--mail-ring); }
.divide-border > * + * { border-color: var(--mail-border); }