/* MiSend design tokens — 8pt grid, MiSans */
:root {
  /* Typography */
  --font-sans: "MiSans", "MiSans Latin", -apple-system, BlinkMacSystemFont, "PingFang SC", "Segoe UI", system-ui, sans-serif;
  --font-mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;

  --fs-display: 28px;  --lh-display: 36px;
  --fs-title: 22px;    --lh-title: 30px;
  --fs-headline: 17px; --lh-headline: 24px;
  --fs-body: 15px;     --lh-body: 24px;
  --fs-callout: 14px;  --lh-callout: 20px;
  --fs-caption: 12px;  --lh-caption: 16px;

  --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600;

  /* Spacing (4 = half step) */
  --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; --space-16: 64px;

  /* Layout */
  --nav-h: 64px;
  --side-w: 280px;
  --row-h: 52px;
  --control-h: 40px;
  --control-h-sm: 32px;
  --control-h-lg: 48px;
  --content-max: 880px;

  /* Radius */
  --radius-sm: 8px; --radius-md: 12px; --radius-lg: 16px; --radius-xl: 20px; --radius-full: 999px;

  /* Motion */
  --ease: cubic-bezier(.2, .8, .2, 1);
  --dur: 200ms;
}

:root[data-theme="light"] {
  --bg: #F7F8FA;
  --surface: #FFFFFF;
  --surface-2: #F1F3F5;
  --border: #E5E7EB;
  --text: #111827;
  --text-2: #6B7280;
  --text-3: #9CA3AF;
  --accent: #10B981;
  --accent-hover: #0EA371;
  --accent-soft: rgba(16, 185, 129, .10);
  --on-accent: #FFFFFF;
  --danger: #EF4444;
  --danger-soft: rgba(239, 68, 68, .08);
  --overlay: rgba(17, 24, 39, .32);
  --shadow-card: 0 1px 2px rgba(0, 0, 0, .04), 0 8px 24px rgba(0, 0, 0, .06);
  --shadow-pop: 0 12px 40px rgba(0, 0, 0, .14);
  --bubble-out: var(--accent);
  --bubble-out-text: #FFFFFF;
  color-scheme: light;
}

:root[data-theme="dark"] {
  --bg: #0B0D10;
  --surface: #15181D;
  --surface-2: #1C2026;
  --border: #262A31;
  --text: #F3F4F6;
  --text-2: #9CA3AF;
  --text-3: #6B7280;
  --accent: #34D399;
  --accent-hover: #4ADEA9;
  --accent-soft: rgba(52, 211, 153, .12);
  --on-accent: #06281C;
  --danger: #F87171;
  --danger-soft: rgba(248, 113, 113, .10);
  --overlay: rgba(0, 0, 0, .56);
  --shadow-card: 0 0 0 1px var(--border);
  --shadow-pop: 0 0 0 1px var(--border), 0 16px 48px rgba(0, 0, 0, .5);
  --bubble-out: var(--accent);
  --bubble-out-text: #06281C;
  color-scheme: dark;
}

@media (max-width: 760px) {
  :root { --nav-h: 56px; }
}