/* BERC AI palette - one monochrome greyscale.
 *
 * This file used to be a colour extraction from https://berc.az, taken on
 * 2026-08-19 with `specx https://berc.az/ --max 0`. It is not that any more.
 * On 2026-08-20 the client looked at the chat page, said the design was bad,
 * and chose a reference to follow instead: the ChatGPT web client UI kit, full
 * fidelity, monochrome. The scale below is that decision - a white page,
 * near-black text, and greys for everything in between - and it is no longer
 * derivable from berc.az. Re-running specx against berc.az would now undo a
 * client decision rather than refresh a measurement, so it must not be done.
 * The reference the decision was read from is in docs/reference/.
 *
 * Every ratio written beside a value was computed with the WCAG relative
 * luminance formula against the surface named next to it, not estimated.
 * Anything that carries text clears AA (4.5:1); anything that does not is
 * labelled so nobody reaches for it by mistake.
 *
 * One file, one palette: app/static/css/chat.css and app/static/css/admin.css
 * read these custom properties and repeat no literal of their own, so there is
 * exactly one file to change the day the palette changes again.
 *
 * The scale is monochrome with exactly one exception, --berc-danger, and the
 * exception is deliberate. The client's decision covers the public chat page;
 * the admin panel shares this file, and it had been painting its login refusal
 * with --berc-accent. Once the accent went black that refusal became ordinary
 * black text with a black rule beside it - the one message on that screen whose
 * whole job is to not look ordinary. A status colour is not decoration, so it
 * survives the monochrome pass instead of being folded into it.
 */

:root {
  /* ------------------------------------------------------------- greyscale */
  /* Lightest to darkest. Every ratio below is against --berc-page unless the
   * comment names another surface. */

  --berc-page: #ffffff;

  /* The one light fill on the page: the visitor's pill, and the panel's canvas.
   * 1.10:1 - a tint, never a text colour. */
  --berc-surface: #f4f4f4;

  /* One step down. The panel's row hover is mixed from it. 1.20:1 - a tint. */
  --berc-tint: #ececec;

  /* Hairline. 1.37:1 - decoration. It is deliberately never used on its own as
   * the edge of a form control: WCAG 1.4.11 wants 3:1 there, so chat.css
   * derives that edge from this token and states the ratio it reaches. */
  --berc-border: #dcdcdc;

  /* The quiet grey, and the only grey here that may carry text: 5.33:1 on the
   * page and 4.85:1 on --berc-surface. Both clear AA, which is what lets the
   * footer note under the composer and the input placeholder use it. */
  --berc-muted: #6b6b6b;

  /* Body copy. 17.40:1 on the page, 15.82:1 on --berc-surface. */
  --berc-text: #1a1a1a;

  /* The product name and any heading. 19.44:1. */
  --berc-heading: #0d0d0d;

  /* ---------------------------------------------------------------- roles */

  /* The single dark control on the page - the round send button. Its white
   * glyph on it: 19.44:1. */
  --berc-primary: #0d0d0d;
  --berc-on-primary: #ffffff;

  /* The hovered state of that button, written out rather than mixed at use
   * time. The value is exactly what `color-mix(in srgb, --berc-primary 78%,
   * --berc-page)` resolves to, so nothing about the design changed - but a mix
   * is re-serialised by the browser on every read, and the last digits of the
   * oklab form come back different between the run that records the visual
   * contract and the run that checks it. That made `vcheck` report a hover
   * mismatch of one part in a million forever: a gate that cries wolf is a gate
   * people learn to ignore. 10.05:1 against the page, and its white glyph sits
   * at 10.05:1 on it. The dark-scheme counterpart is the same trick:
   * `color-mix(in srgb, --berc-page 82%, --berc-heading)`, 12.98:1 against the
   * dark canvas. */
  --berc-primary-hover: #424242;
  --berc-primary-hover-dark: #d3d3d3;

  /* Emphasis: the focus ring, the notice's rule, a link in an answer. 21:1 on
   * the page - the most a ring can reach, which is the reason it stays a token
   * of its own in a scale where everything else is already dark. */
  --berc-accent: #000000;

  /* The only hue in the file. Not used on the chat page at all - it exists for
   * the admin panel's refusal, where losing the colour would have cost a signal
   * rather than saved one. Measured against every surface it can land on:
   * 6.42:1 on --berc-page, 5.84:1 on --berc-surface, 5.44:1 on --berc-tint.
   * All three clear AA for text, which is what it is used for. */
  --berc-danger: #b3234f;

  /* ----------------------------------------------------------- typography */

  /* No web font is loaded. Inter is used where the visitor already has it and
   * the platform's own UI face is used where they do not; a page that fetches
   * a font to say four sentences is not worth the request. */
  --berc-font: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --berc-size-base: 16px;
  --berc-size-small: 13px;
  --berc-line-base: 1.5;
  /* An answer is a paragraph the visitor reads, not a label they scan. The
   * reference sets its answers noticeably looser than its chrome and that is
   * most of why they read as calm. */
  --berc-line-relaxed: 1.7;

  /* ---------------------------------------------------------------- shape */

  --berc-radius-sm: 6px;
  --berc-radius: 8px;
  --berc-radius-lg: 12px;
  /* The composer box and the visitor's pill. The reference rounds both far
   * more than a card, which is what stops the pill reading as a table cell. */
  --berc-radius-xl: 24px;

  /* The composer is the one element that floats above the page rather than
   * sitting in it, so it is the one element with a shadow. Kept faint on
   * purpose: it is a lift, not a card. */
  --berc-shadow:
    0 1px 2px rgb(0 0 0 / 4%),
    0 8px 24px rgb(0 0 0 / 6%);

  --berc-transition: 0.2s;
}