@import "tailwindcss";

/*
 * Design tokens ported 1:1 from docs/design_handoff_meetingim_web/README.md's "Design Tokens"
 * section. Values are exact hex/px from the design handoff, not semantic guesses -- keep them in
 * sync with that doc, not with whatever the previous im_webapp's css/base.css happened to use.
 *
 * Breakpoints are intentionally remapped onto Tailwind's own sm/md/lg so every component can just
 * use the standard `sm:`/`md:`/`lg:` prefixes (min-width, mobile-first) instead of inventing custom
 * variants: <640 base styles = single column mobile, sm: (>=640) = two column, md: (>=960) = three
 * column, lg: (>=1280) = four column docked detail panel.
 */
@theme {
  --breakpoint-sm: 640px;
  --breakpoint-md: 960px;
  --breakpoint-lg: 1280px;

  --font-sans: Roboto, 'PingFang SC', 'Microsoft YaHei', sans-serif;

  /* Primary / accent */
  --color-accent: #1677ff;
  --color-accent-soft-bg: #e3eefe;
  --color-accent-selected-bg: #e8f1fe;
  --color-focus-border: #4091ff;

  --color-btn: #368bfa;
  --color-btn-hover: #1677e8;
  --color-btn-disabled: #b8d5fa;

  /* Sent bubble */
  --color-bubble-mine: #b9eb8f;

  /* Surfaces */
  --color-surface-chat: #eef1f4;
  --color-surface-content: #f6f7f9;
  --color-surface-page: #f7f9fc;
  --color-surface-rail: #f2f4f7;
  --color-surface-input: #f2f4f7;
  --color-surface-search: #f1f2f4;

  /* Borders */
  --color-border-panel: #eceef1;
  --color-border-row: #f1f2f4;
  --color-border-list-item: #f4f5f7;

  /* Text */
  --color-text-title: #14171c;
  --color-text-heading: #22262d;
  --color-text-body: #252931;
  --color-text-secondary: #656b74;
  --color-text-tertiary-1: #4a4f57;
  --color-text-tertiary-2: #969ca5;
  --color-text-tertiary-3: #9ca2aa;
  --color-text-tertiary-4: #8d949d;
  --color-text-placeholder-1: #b2b7bf;
  --color-text-placeholder-2: #a5abb4;

  --color-icon-default: #555c65;
  --color-icon-arrow: #c2c7ce;

  /* Status */
  --color-unread: #f34b46;
  --color-danger-text: #d94b4b;
  --color-danger-border: #cf3f3f;
  --color-danger-border-soft: #f3c4c4;
  --color-online: #1fb36a;
  --color-offline: #aeb4bd;

  /* Orange (system messages / group owner / warning) */
  --color-warn: #ff951c;
  --color-warn-bg: #fff5e5;
  --color-announce: #f5a623;
  --color-announce-bg: #fff8e6;
  --color-announce-text: #6d4c41;

  /* Green (file assistant / success) */
  --color-success: #16ae54;
  --color-success-bg: #eefaf3;

  /* Alert strips */
  --color-error-strip-bg: #ffeef0;
  --color-error-strip-text: #b51c1c;
  --color-info-strip-bg: #e8f1fe;
  --color-info-strip-text: #1a4f9c;

  /* Call surfaces (dark) */
  --color-call-bg-1: #1b2231;
  --color-call-bg-2: #1f2a3d;
  --color-call-bg-3: #3b4a63;

  /* Avatar palette (deterministic per-contact hashing picks from this list) */
  --color-avatar-1: #3c8df6;
  --color-avatar-2: #7c5cf6;
  --color-avatar-3: #2bb673;
  --color-avatar-4: #f28c3b;
  --color-avatar-5: #e2537a;
  --color-avatar-6: #0097a8;
  --color-avatar-7: #8d6e63;
  --color-avatar-8: #5c6bc0;
  --color-avatar-9: #26a69a;
  --color-avatar-10: #ef6c00;
  --color-avatar-11: #9ca2aa;

  /* Shadows */
  --shadow-card: 0 8px 32px rgba(35, 74, 125, 0.10);
  --shadow-modal: 0 20px 60px rgba(0, 0, 0, 0.18);
  --shadow-menu: 0 12px 36px rgba(0, 0, 0, 0.16);
  --shadow-bubble: 0 1px 2px rgba(0, 0, 0, 0.06);
  --shadow-btn: 0 4px 12px rgba(54, 139, 250, 0.2);
  --shadow-focus-ring: 0 0 0 3px rgba(22, 119, 255, 0.1);
}

body {
  margin: 0;
  background: var(--color-surface-page);
  color: var(--color-text-body);
  font-family: var(--font-sans);
}