/* SecureTalk design tokens — shared across web / Android / iOS PWA */
:root {
  /* Brand */
  --st-brand: #2AABEE;
  --st-brand-soft: #e7f3ff;
  --st-danger: #e53935;
  --st-success-check: #4fae4e;

  /* Surfaces */
  --st-bg: #ffffff;
  --st-bg-muted: #f1f2f4;
  --st-bg-chat: #c8d9c4;
  --st-bubble-out: #effdde;
  --st-bubble-in: #ffffff;
  --st-glass: rgba(255, 255, 255, 0.72);
  --st-glass-dark: rgba(232, 240, 230, 0.92);
  --st-separator: rgba(0, 0, 0, 0.08);

  /* Text */
  --st-text: #000000;
  --st-text-secondary: #8e8e93;
  --st-text-link: #2AABEE;
  --st-text-on-brand: #ffffff;

  /* Radius */
  --st-radius-sm: 10px;
  --st-radius-md: 14px;
  --st-radius-lg: 18px;
  --st-radius-pill: 999px;
  --st-bubble-radius: 16px;

  /* Spacing */
  --st-space-1: 4px;
  --st-space-2: 8px;
  --st-space-3: 12px;
  --st-space-4: 16px;
  --st-space-5: 20px;
  --st-space-6: 24px;

  /* Type */
  --st-font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI",
    "PingFang TC", "Noto Sans TC", sans-serif;
  --st-fs-xs: 12px;
  --st-fs-sm: 13px;
  --st-fs-md: 15px;
  --st-fs-lg: 17px;
  --st-fs-xl: 22px;
  --st-fs-title: 28px;

  /* Shadows / blur */
  --st-blur: 20px;
  --st-shadow-nav: 0 4px 24px rgba(0, 0, 0, 0.08);
  --st-shadow-menu: 0 8px 32px rgba(0, 0, 0, 0.16);

  /* Layout */
  --st-nav-height: 64px;
  --st-header-height: 56px;
  --st-max-chat-width: 720px;
}