/* My Skin My Health's colours and type for the chat (core/public/chat.css reads these tokens) */
:root {
  /* The logo is pink #d82070 and green #00a048, and the website sets its dark
     sections in navy #0e3055. White on the logo's own pink is 4.8:1, so filled
     controls and links use it deepened a little to 5.9:1. The green is an
     accent, as it is in the logo, and never carries text on white. */
  --brand: #c41a63;
  --brand-deep: #a3134f;
  --brand-soft: #fdecf3;
  --on-brand: #ffffff;
  --brand-teal: #d82070;
  --brand-cyan: #00a048;
  --brand-royal: #0e3055;

  /* conversation rail: the website's navy */
  --side-bg: #0e3055;
  --side-bg-2: #163d68;
  --side-head: #0a2443;
  --side-line: rgba(255, 255, 255, 0.09);
  --side-text: #b4c4d8;
  --side-title: #ffffff;

  /* chat pane */
  --paper: #f7f8fa;
  --surface: #ffffff;
  --ink: #1f2b3a;
  --muted: #4f5b6a;
  --faint: #59636f;
  --line: #e3e6eb;
  --user-bubble: #fdecf3;
  --user-line: #f6c9dc;
  --danger: #b3261e;
  --focus-ring: rgba(216, 32, 112, 0.2);

  --radius: 12px;
  --radius-lg: 16px;
  --pill: 999px;
  --shadow-sm: 0 1px 2px rgba(14, 48, 85, 0.06);
  --shadow-md: 0 4px 16px rgba(14, 48, 85, 0.08);
  --shadow-lg: 0 18px 50px rgba(10, 36, 67, 0.28);

  /* The website's own type: DM Sans throughout */
  --font: 'DM Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-head: 'DM Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}