/*
 * THEME: every colour, font, radius and size the interface uses lives here as a CSS variable.
 * style.css only reads these; it contains no colour or font of its own.
 *
 * To change the look, do NOT edit this file (updates would overwrite it). Create data/custom.css
 * and override any of these variables there, or add any CSS rules of your own. It loads after
 * everything else, is never overwritten by updates, and a reload shows the change. Delete the
 * file to get the default look back. Example:
 *
 *   :root { --accent: #6aa5ff; --font-heading: "Comic Sans MS", cursive; --radius-lg: 8px; }
 *
 * Colours accept any CSS colour. The companion's own look (hair, clothes) is not styled here:
 * ask her to change it in chat.
 */
:root {
  /* surfaces */
  --panel: #1f1e1d;            /* the chat panel background */
  --surface: #2b2a28;          /* raised things: composer, your messages, selected toggle */
  --popover: #262523;          /* menus and small floating forms */
  --code-bg: rgba(0, 0, 0, .3);
  --line: rgba(255, 255, 255, .09);        /* hairline borders */
  --fill-1: rgba(255, 255, 255, .06);      /* subtle fills: inputs, tool rows */
  --fill-2: rgba(255, 255, 255, .12);      /* secondary buttons */
  --fill-3: rgba(255, 255, 255, .2);       /* hover on secondary buttons */
  --hover: rgba(255, 255, 255, .08);       /* hover on quiet buttons and menu rows */

  /* text */
  --text: #ece9e2;
  --muted: #9b968c;

  /* colours with a meaning */
  --accent: #d97757;           /* send button, focus, highlights */
  --accent-hover: #e48a6c;
  --accent-text: #ffffff;      /* text on top of --accent */
  --focus: rgba(217, 119, 87, .55);
  --selected: #6aa5ff;         /* check mark in menus */
  --ok: #5be3a0;               /* connected */
  --bad: #e0486b;              /* disconnected */
  --error-text: #ff9fb0;
  --warn-text: #e8b45a;        /* usage getting high */
  --warn-bg: rgba(255, 200, 120, .1);
  --warn-line: rgba(255, 200, 120, .35);

  /* the companion side */
  --stage-1: #3a1f5e;          /* backdrop gradient, centre */
  --stage-2: #1b1535;          /* backdrop gradient, edge */
  --stage-tool-bg: rgba(18, 12, 38, .92);
  --bubble-bg: rgba(255, 255, 255, .93);   /* her speech bubble over the avatar */
  --bubble-text: #2a2040;

  /* type */
  --font-body: system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-heading: Georgia, "Iowan Old Style", "Times New Roman", serif;
  --font-mono: ui-monospace, Menlo, Consolas, monospace;
  --font-size: 16px;
  --font-size-small: 13px;
  --line-height: 1.55;

  /* shape */
  --radius-sm: 8px;            /* thumbnails, code boxes */
  --radius-md: 12px;           /* buttons, inputs, speech bubble */
  --radius-lg: 20px;           /* composer card, message bubbles */
  --radius-pill: 999px;        /* round buttons */
  --shadow: 0 12px 34px rgba(0, 0, 0, .5);

  /* layout */
  --panel-padding: 18px;
  --gap: 10px;
}