/* Project-specific extensions to the Buro Staal design tokens.
   Add values here that aren't in the source design system but are
   application-specific (chat panel sizes, hairline width). Keep this file
   small and reference tokens.css values wherever possible. */

:root {
  /* Hairline border width. Buro Staal uses a 1px hairline everywhere. */
  --bs-hairline: 1px;

  /* Chat panel dimensions. */
  --bs-chat-width: 400px;
  --bs-chat-height: 620px;
  --bs-chat-inset: var(--bs-space-5);
  --bs-chat-panel-max: 560px;

  /* Agent avatar sizes: 44 in header, 28 next to messages.
     These are the ONLY round shapes in the whole design system. */
  --bs-agent-avatar-header: 44px;
  --bs-agent-avatar-msg: 28px;

  /* Focus ring color. Blue at 2px is high-contrast on both light and dark. */
  --bs-focus-ring: 0 0 0 2px var(--bs-blue);
  --bs-focus-ring-dark: 0 0 0 2px var(--bs-green);

  /* Modal scrim: near-black at 50% opacity. Not a semantic brand color, so
     lives here rather than tokens.css. */
  --bs-scrim: rgba(10, 10, 10, 0.5);

  /* Error message tint. Buro Staal doesn't have an error-tint token in the
     bron design; the ChatBox screen uses #FBE6E2. Kept here so components
     can reference the semantic name. */
  --bs-danger-tint: #FBE6E2;

  /* Tompouce (thinking indicator). The design uses a stylized tompouce icon
     as the "denkt na" affordance. Non-semantic colors that only live in this
     one component. */
  --bs-tompouce-glaze: #F59BBE;
  --bs-tompouce-pastry: #D9A457;
  --bs-tompouce-cream: #F2C94C;

  /* --- Stap 2 nieuwe tokens (uit design/Data Assistant Design System Stap 2) --- */
  /* Statuskleuren: volle vlakvulling voor status-tags, altijd zwarte tekst erop. */
  --bs-color-status-good: #7EF769;
  --bs-color-status-attention: #FF9F1C;
  --bs-color-status-bad: #FF4B2B;
  /* Info tints: zachte lila voor "opgepakt/kans", donker equivalent voor dark theme. */
  --bs-color-info-tint: #ECE9FB;
  --bs-color-info-tint-dark: #1B1440;
  /* Sterke muted-ink: tabelkoppen, AgentLabel, tekst op #EFEEEB. */
  --bs-color-text-strong-muted: #3A3A36;
  /* Modal scrim per design: 60% zwart. */
  --bs-color-scrim: rgba(10, 10, 10, 0.6);
  /* Layout constanten. */
  --bs-size-target: 44px;
  --bs-layout-nav-height: 64px;
  --bs-layout-measure: 720px;
  /* Statustekst-inkt op wit (uit design). */
  --bs-color-status-good-ink: #17704A;
  --bs-color-status-attention-ink: #8A5A00;
  --bs-color-status-bad-ink: #A82A18;

  /* StaffBar hairline en hover op donkerblauw (design specificeert deze alfa's). */
  --bs-staff-bar-border: rgba(255, 255, 255, 0.5);
  --bs-staff-bar-hover: rgba(255, 255, 255, 0.08);

  /* Hairline op donker vlak binnen een geselecteerde AgentCard. */
  --bs-hairline-on-dark: rgba(255, 255, 255, 0.14);

  /* Monospace stack voor inline code in geraffde markdown. */
  --bs-font-mono: ui-monospace, SFMono-Regular, Menlo, monospace;
}