/* HayAICall design tokens — shared by the website and the app.
   Source: brand/tokens (HayAI Indigo, Resonance Teal, slate neutrals). */
:root {
  --font: "Plus Jakarta Sans", "Be Vietnam Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-vi: "Be Vietnam Pro", "Plus Jakarta Sans", sans-serif;
  --font-ja: "Noto Sans JP", "Hiragino Sans", "Yu Gothic", sans-serif;
  --font-mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, monospace;

  --bg: #f8fafc;
  --surface: #ffffff;
  --surface-2: #f1f5f9;
  --ink: #0f172a;
  --ink-2: #334155;
  --muted: #64748b;
  --line: #e2e8f0;
  --line-strong: #cbd5e1;

  --brand: #2563eb;
  --brand-strong: #1d4ed8;
  --brand-soft: #eef2ff;
  --brand-ink: #ffffff;
  --teal: #0d9488;
  --teal-soft: #f0fdfa;
  --accent: #f59e0b;

  --success: #059669;
  --success-soft: #ecfdf5;
  --warn: #b45309;
  --warn-soft: #fffbeb;
  --danger: #dc2626;
  --danger-soft: #fef2f2;
  --info: #0284c7;
  --info-soft: #f0f9ff;

  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-xl: 20px;
  --r-pill: 999px;

  --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.05);
  --shadow-md: 0 4px 6px -1px rgba(15, 23, 42, 0.07), 0 2px 4px -2px rgba(15, 23, 42, 0.04);
  --shadow-lg: 0 20px 40px -12px rgba(15, 23, 42, 0.18);
  --shadow-cta: 0 6px 18px rgba(37, 99, 235, 0.28);
  --ring: 0 0 0 3px rgba(37, 99, 235, 0.25);
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0b1120;
    --surface: #111827;
    --surface-2: #1e293b;
    --ink: #f1f5f9;
    --ink-2: #cbd5e1;
    --muted: #94a3b8;
    --line: #1f2a3d;
    --line-strong: #334155;
    --brand: #4f7cff;
    --brand-strong: #7c9dff;
    --brand-soft: #172554;
    --brand-ink: #ffffff;
    --teal: #14b8a6;
    --teal-soft: #0f2e2b;
    --success: #34d399;
    --success-soft: #052e22;
    --warn: #fbbf24;
    --warn-soft: #2b1d05;
    --danger: #f87171;
    --danger-soft: #2d0f0f;
    --info: #38bdf8;
    --info-soft: #082f49;
    --shadow-sm: none;
    --shadow-md: 0 0 0 1px var(--line);
    --shadow-lg: 0 0 0 1px var(--line), 0 24px 48px -16px rgba(0, 0, 0, 0.6);
    --shadow-cta: 0 6px 18px rgba(79, 124, 255, 0.25);
    --ring: 0 0 0 3px rgba(79, 124, 255, 0.35);
    color-scheme: dark;
  }
}