/* Design tokens.
 * Colour values are carried over from the existing WA web app (app.css: --wa-* and --mtm-*),
 * so the prototype looks like the same product family. Light is the default; dark mirrors
 * the existing app's dark theme. */
:root {
  --font: 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --brand: #00a884;            /* --wa-teal */
  --brand-hover: #029070;      /* --wa-teal-hover */
  --brand-strong: #008069;     /* --mtm-primary-active */
  --brand-accent: #25d366;     /* --wa-green */
  --brand-ink: #ffffff;

  --bg: #f0f2f5;               /* --wa-light-bg */
  --surface: #ffffff;
  --surface-2: #f7f8fa;        /* --mtm-card-inner */
  --surface-3: #eef1f4;
  --hover: #f5f6f6;            /* --wa-light-hover */
  --border: #d1d7db;           /* --mtm-border */
  --border-soft: #e9edef;
  --text: #111b21;
  --text-2: #3b4a54;
  --muted: #667781;            /* --wa-light-muted */
  --bubble-in: #ffffff;
  --bubble-out: #d9fdd3;       /* --wa-light-bubble-out */
  --bubble-note: #fff6d6;
  --chat-bg: #efeae2;
  --doodle: url('../../assets/wa-doodle-light.svg');

  /* Status colours: reserved for state only, always shown with an icon + label */
  --ok: #1f8a4c;      --ok-bg: #e3f5ea;
  --warn: #9a6200;    --warn-bg: #fff3d6;
  --bad: #c62828;     --bad-bg: #fde7e7;
  --info: #1d63b8;    --info-bg: #e5effb;
  --neutral-bg: #eceff1;

  /* Channel identity */
  --ch-whatsapp: #128c7e;
  --ch-messenger: #0a66d8;
  --ch-instagram: #c1358a;

  --radius-sm: 6px;
  --radius: 10px;
  --radius-lg: 14px;
  --shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
  --shadow-lg: 0 10px 30px rgba(17, 27, 33, 0.18);
  --focus: 0 0 0 3px rgba(0, 168, 132, 0.35);

  --sidebar-w: 232px;
  --topbar-h: 56px;
}

[data-theme='dark'] {
  --bg: #0b141a;               /* --wa-dark-bg */
  --surface: #111b21;          /* --wa-dark-card */
  --surface-2: #182229;
  --surface-3: #202c33;        /* --wa-dark-rail */
  --hover: #202c33;
  --border: #2a3942;           /* --wa-dark-border */
  --border-soft: #22303a;
  --text: #e9edef;
  --text-2: #c5ced3;
  --muted: #8696a0;
  --bubble-in: #202c33;
  --bubble-out: #005c4b;
  --bubble-note: #3d3519;
  --chat-bg: #0b141a;
  --doodle: url('../../assets/wa-doodle.svg');

  --ok: #5fd08e;      --ok-bg: #12301f;
  --warn: #f2b84b;    --warn-bg: #3a2c0c;
  --bad: #ff7b72;     --bad-bg: #3d1616;
  --info: #79b0ff;    --info-bg: #13263f;
  --neutral-bg: #22303a;

  --shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
  --shadow-lg: 0 12px 34px rgba(0, 0, 0, 0.5);
}