/*
  Boostorder KB — shared design tokens.

  Every value here was pulled from the real boostorder-web product source
  (resources/sass/_variables.scss and friends, ci branch — see
  _design/real_styles/). This file is the single source of truth for those
  tokens across the whole site: the article pages, the walkthrough player,
  and the ask-AI widget all reference these custom properties instead of
  hardcoding colors. Do not add a new color here without pulling it from
  the real product source first — inventing a new palette for this project
  has been explicitly rejected before (see the project's feedback memory).
*/

:root {
  --bg: #F2F2F2;
  --surface: #FFFFFF;
  --row-alt: #F7F7F7;
  --border: rgba(0, 0, 0, .12);

  --text-heading: rgba(0, 0, 0, .87);
  --text-body: rgba(0, 0, 0, .6);
  --text-light: rgba(0, 0, 0, .38);

  --arclight: #007AFF;
  --arclight-bg: #EBF4FF;
  --arclight-border: #9ECCFF;

  --success: #00B187;
  --success-bg: #EBF9F5;

  --danger: #FF3B30;
  --danger-bg: #FFEFEE;

  --warning: #FFB200;
  --warning-bg: #FEFFE5;

  /* Product Director audience accent (site-wide color coding, not a product UI color). */
  --navy: #004366;

  /* Real product's $primaryColor token; used for the walkthrough player's persistent icon sidebar. */
  --sidebar-bg: #594C45;

  --radius-card: 16px;
  --radius-modal: 8px;
  --radius-pill: 999px;

  --shadow-card: 0px 2px 4px rgba(0, 0, 0, .07), 0px 4px 5px rgba(0, 0, 0, .06), 0px 1px 10px rgba(0, 0, 0, .1);

  --sidebar-width: 64px;
  --navbar-height: 56px;

  --font-family: 'Montserrat', system-ui, sans-serif;
  --font-size-base: 14px;
  --font-weight-base: 500;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text-body);
  font-family: var(--font-family);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-base);
}