:root {
  /* The messenger piggybacks on BesserNews comment-engine tokens so both experiences feel united. */
  --bn-ms-color-primary: var(--bn-ce-color-primary, #ff7a18);
  --bn-ms-color-primary-soft: var(--bn-ce-color-primary-soft, rgba(255, 122, 24, 0.12));
  --bn-ms-color-primary-strong: var(--bn-ce-color-primary-strong, #c2410c);
  --bn-ms-color-text: var(--bn-ce-color-text, #1f2937);
  --bn-ms-color-text-muted: var(--bn-ce-color-text-muted, #6b7280);
  --bn-ms-color-text-soft: var(--bn-ce-color-text-soft, #9ca3af);
  --bn-ms-color-surface: var(--bn-ce-color-surface, #ffffff);
  --bn-ms-color-surface-alt: var(--bn-ce-color-surface-alt, #f5f5f5);
  --bn-ms-color-bg: var(--bn-ce-color-bg, #fafafa);
  --bn-ms-color-border: var(--bn-ce-color-border, #e5e7eb);
  --bn-ms-color-border-strong: var(--bn-ce-color-border-strong, #d1d5db);
  --bn-ms-color-danger: var(--bn-ce-color-danger, #ef4444);
  --bn-ms-color-success: var(--bn-ce-color-success, #22c55e);

  --bn-ms-font-sans: var(--bn-ce-font-sans, 'Inter', sans-serif);
  --bn-ms-font-size-xs: var(--bn-ce-font-size-xs, 0.75rem);
  --bn-ms-font-size-sm: var(--bn-ce-font-size-sm, 0.875rem);
  --bn-ms-font-size-md: var(--bn-ce-font-size-md, 1rem);
  --bn-ms-font-size-lg: var(--bn-ce-font-size-lg, 1.125rem);
  --bn-ms-font-size-xl: var(--bn-ce-font-size-xl, 1.5rem);
  --bn-ms-font-weight-normal: var(--bn-ce-font-weight-regular, 400);
  --bn-ms-font-weight-medium: var(--bn-ce-font-weight-medium, 600);
  --bn-ms-font-weight-bold: var(--bn-ce-font-weight-bold, 700);

  --bn-ms-spacing-2xs: var(--bn-ce-space-2xs, 0.25rem);
  --bn-ms-spacing-xs: var(--bn-ce-space-xs, 0.5rem);
  --bn-ms-spacing-sm: var(--bn-ce-space-sm, 0.75rem);
  --bn-ms-spacing-md: var(--bn-ce-space-md, 1rem);
  --bn-ms-spacing-lg: var(--bn-ce-space-lg, 1.5rem);
  --bn-ms-spacing-xl: var(--bn-ce-space-xl, 2rem);

  --bn-ms-radius-xs: var(--bn-ce-radius-xs, 0.375rem);
  --bn-ms-radius-sm: var(--bn-ce-radius-sm, 0.5rem);
  --bn-ms-radius-md: var(--bn-ce-radius-md, 0.75rem);
  --bn-ms-radius-lg: var(--bn-ce-radius-lg, 1rem);
  --bn-ms-radius-xl: var(--bn-ce-radius-xl, 1.5rem);
  --bn-ms-radius-pill: var(--bn-ce-radius-pill, 9999px);

  --bn-ms-shadow-xs: var(--bn-ce-shadow-xs, 0 1px 2px rgba(15, 23, 42, 0.08));
  --bn-ms-shadow-sm: var(--bn-ce-shadow-sm, 0 4px 12px rgba(15, 23, 42, 0.12));
  --bn-ms-shadow-md: var(--bn-ce-shadow-md, 0 12px 30px rgba(15, 23, 42, 0.16));
  --bn-ms-shadow-lg: var(--bn-ce-shadow-lg, 0 24px 48px rgba(15, 23, 42, 0.18));

  --bn-ms-transition-base: var(--bn-ce-transition-base, 180ms ease);

  --bn-ms-z-base: 10;
  --bn-ms-z-overlay: 30;
  --bn-ms-z-modal: 60;
  --bn-ms-z-max: 2147483647;

  --bn-ms-safe-bottom: var(--bn-ce-safe-bottom, env(safe-area-inset-bottom, 0px));
}

/* Basic Reset & Body styles */
.bn-ms-app, .bn-ms-shell {
  box-sizing: border-box;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.bn-ms-app *, .bn-ms-shell *,
.bn-ms-app *::before, .bn-ms-shell *::before,
.bn-ms-app *::after, .bn-ms-shell *::after {
  box-sizing: border-box;
}

.bn-ms-app {
  font-family: var(--bn-ms-font-sans);
  color: var(--bn-ms-color-text);
  font-size: 16px;
  line-height: 1.5;
}

/* Remove default margin */
h1, h2, h3, h4, p, ul, ol, li, figure, figcaption, blockquote, dl, dd {
  margin: 0;
}

button {
  font-family: inherit;
}