/* AgentTeam Mini Program — global styles
 *
 * Design tokens align with web (`web/src/index.css`) so the miniapp shares
 * the same visual language as the desktop product. Light theme is canonical.
 */

@import "/styles/icons.wxss";
@import "/styles/appearance.wxss";

page {
  /* Surfaces */
  --color-bg: #ffffff;
  --color-fg: #0a0a0a;            /* hsl(0 0% 3.9%)  = web --foreground */
  --color-muted: #f0f0f0;          /* hsl(0 0% 94%)   = web --muted */
  --color-muted-fg: #474747;       /* hsl(0 0% 28%)   = web --muted-foreground */
  --color-accent: #e9e9e9;         /* hsl(0 0% 91.5%) = web --accent */
  --color-accent-fg: #0a0a0a;
  --color-border: #d6d6d6;         /* hsl(0 0% 84%)   = web --border */
  --color-border-subtle: #f0f0f0;
  --color-primary: #171717;        /* hsl(0 0% 9%)    = web --primary */
  --color-primary-fg: #ffffff;
  --color-card: #ffffff;
  --color-placeholder: #b5b5b5;     /* lighter than --color-muted-fg for input placeholders */
  --color-subtle-fg: #737373;       /* hsl(0 0% 45%) — one step lighter than --color-muted-fg for de-emphasized hints (e.g. notification summary under composer) */
  /* Semantic */
  --color-warning: #f59e0b;
  --color-warning-fg: #78350f;
  --color-warning-muted: #fef3c7;
  --color-success: #16a34a;
  --color-success-fg: #14532d;
  --color-success-muted: #dcfce7;
  --color-destructive: #ef4444;
  --color-destructive-fg: #ffffff;
  --color-mention: #7c3aed;
  --color-mention-muted: #ede9fe;
  --color-info: #1296db;           /* legacy brand blue, kept for unread badge */
  --color-inbox-icon: #7f7f7f;      /* lower-emphasis list glyphs */
  /* Avatar fallback colors (align with web Avatar.tsx — saturated so they read on both themes) */
  --color-avatar-human: #8b5cf6;   /* bg-violet-500 */
  --color-avatar-agent: #3b82f6;   /* bg-blue-500 */
  --color-avatar-service: #f59e0b; /* bg-amber-500 */
  --color-avatar-channel: #3b82f6; /* bg-blue-500 — channels share agent's blue in the miniapp */
  --color-avatar-fg: #ffffff;
  /* Markdown accents (mirror web index.css — GitHub-like palette) */
  --color-md-code-bg: #f6f8fa;
  --color-md-code-fg: #24292f;
  --color-md-inline-bg: rgba(175, 184, 193, 0.14);
  --color-md-inline-fg: #24292f;
  --color-md-inline-border: #d8dee4;
  --color-md-link: #1d4ed8;        /* text-blue-700 */
  --color-md-quote-border: rgba(71, 71, 71, 0.35);
  --color-md-quote-fg: rgba(10, 10, 10, 0.7);
  /* JSON tree accents (mirror web's AgentTrajectoryJSONView palette) */
  --color-json-key: #0369a1;       /* sky-700 */
  --color-json-string: #0a0a0a;    /* matches --color-fg */
  --color-json-number: #b45309;    /* amber-700 */
  --color-json-boolean: #6d28d9;   /* violet-700 */
  --color-json-block-bg: #fafafa;
  /* Radii (web --radius 0.5rem = 8px; miniapp uses rpx where 2rpx ≈ 1px @ 750w) */
  --radius-sm: 8rpx;
  --radius-md: 12rpx;
  --radius-lg: 16rpx;
  --radius-xl: 24rpx;
  --radius-pill: 9999rpx;
  /* Spacing scale (4px base, matches Tailwind) */
  --space-1: 8rpx;
  --space-2: 16rpx;
  --space-3: 24rpx;
  --space-4: 32rpx;
  --space-5: 48rpx;
  --space-6: 64rpx;
  /* Typography */
  --font-display: -apple-system, BlinkMacSystemFont, "PingFang SC",
    "Helvetica Neue", Helvetica, "Segoe UI", Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, "Cascadia Mono", "Roboto Mono",
    Menlo, Consolas, monospace;
  --text-xs: 22rpx;   /* 11px */
  --text-sm: 24rpx;   /* 12px */
  --text-base: 28rpx; /* 14px */
  --text-md: 30rpx;   /* 15px */
  --text-lg: 32rpx;   /* 16px */
  --text-xl: 36rpx;   /* 18px */
  --text-2xl: 40rpx;  /* 20px */
  --text-3xl: 48rpx;  /* 24px */
  --font-medium: 500;
  --font-semibold: 600;
  --font-bold: 700;
  /* Shadows */
  --shadow-sm: 0 1rpx 2rpx rgba(0, 0, 0, 0.04);
  --shadow-md: 0 4rpx 12rpx rgba(0, 0, 0, 0.08);
  --shadow-lg: 0 12rpx 32rpx rgba(0, 0, 0, 0.12);

  background-color: var(--color-bg);
  font-family: var(--font-display);
  font-size: var(--text-base);
  color: var(--color-fg);
  line-height: 1.5;
}

.page-container {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background-color: var(--color-bg);
  box-sizing: border-box;
}

.placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--space-6) var(--space-4);
  color: var(--color-muted-fg);
}

.placeholder__title {
  font-size: var(--text-xl);
  font-weight: var(--font-semibold);
  color: var(--color-fg);
  margin-bottom: var(--space-2);
}

.placeholder__subtitle {
  font-size: var(--text-sm);
  color: var(--color-muted-fg);
}