/* WhatSell V2 design tokens (--wk-*). One source for colour, type, shape, elevation and motion.
 * Brand: green #2A9245, lime #96C93E, dark gray #2D2C2C, white. Typeface: Poppins.
 * The older --ws-* (ui/whatsell-ui.css, shared with the iframe modules) and the shell aliases (--ink, --green, --line ...)
 * are mapped onto these, so every V2 screen follows the same palette. */
:root {
  /* brand */
  --wk-green: #2a9245;
  --wk-green-600: #23803b;
  --wk-green-700: #1f6f35;
  --wk-lime: #96c93e;
  --wk-ink: #2d2c2c;

  /* sidebar + action accent: brand greens (2026 guideline). Variable names kept so every screen picks them up. */
  --wk-navy: #133f22;          /* sidebar bottom: deep brand green */
  --wk-navy-2: #1f6f35;        /* sidebar top: brand green 700 */
  --wk-navy-line: rgba(255, 255, 255, .12);
  --wk-on-navy: #f1fbef;       /* sidebar text */
  --wk-on-navy-2: #b7dcbf;     /* sidebar secondary text and icons */
  --wk-accent: #2a9245;        /* buttons, active items: WhatsApp Green */
  --wk-accent-600: #1f6f35;
  --wk-accent-soft: #e4f4e8;   /* selected rows, soft fills */

  /* surfaces */
  --wk-bg: #f4faf5;            /* app canvas */
  --wk-bg-2: #eaf6ec;          /* canvas gradient end */
  --wk-surface: #ffffff;       /* cards, panels */
  --wk-surface-2: #f7f9f7;     /* inset areas, inputs */
  --wk-chat-bg: #eef3ee;       /* conversation canvas */

  /* text */
  --wk-text: var(--wk-ink);
  --wk-text-2: #5b6159;        /* secondary */
  --wk-text-3: #858b83;        /* muted / captions (4.5:1 on white) */

  /* lines and states */
  --wk-border: #e7eee8;
  --wk-border-strong: #d3e2d5;
  --wk-hover: #f1f7f2;
  --wk-selected: #e4f4e8;       /* active nav / selected row */
  --wk-selected-line: #b9e0c3;
  --wk-bubble-out: #e2f2dd;     /* outgoing bubble */

  /* status */
  --wk-success: #2a9245;
  --wk-warning: #b7791f;
  --wk-error: #c93c3c;
  --wk-info: #2b6cb0;
  --wk-tick-read: #2b8fd6;

  /* type */
  --wk-font: "Poppins", system-ui, -apple-system, "Segoe UI", sans-serif;
  --wk-fs-xs: 11.5px; --wk-fs-sm: 12.5px; --wk-fs-md: 14px; --wk-fs-lg: 16px; --wk-fs-xl: 20px; --wk-fs-2xl: 24px;

  /* space (4px scale) */
  --wk-s1: 4px; --wk-s2: 8px; --wk-s3: 12px; --wk-s4: 16px; --wk-s5: 20px; --wk-s6: 24px; --wk-s8: 32px;

  /* shape */
  --wk-r-card: 20px; --wk-r-panel: 16px; --wk-r-btn: 12px; --wk-r-input: 12px; --wk-r-pill: 999px;

  /* elevation: subtle only */
  --wk-sh-1: 0 1px 2px rgba(31, 60, 38, .05);
  --wk-sh-2: 0 1px 2px rgba(31, 60, 38, .05), 0 6px 18px rgba(31, 60, 38, .06);
  --wk-sh-pop: 0 8px 30px rgba(31, 60, 38, .16);

  /* motion */
  --wk-t: 180ms cubic-bezier(.2, .7, .3, 1);

  /* layout */
  --wk-sb-w: 272px; --wk-sb-rail: 60px; --wk-top-h: 72px;
}
@media (prefers-reduced-motion: reduce) { :root { --wk-t: 0ms; } }