/*!
 * ICR Core design tokens, v0.1 (#312, from the #268 design proposal; v0.1 adds the
 * surface-2, line-subtle, highlight, scrim, mono and radius-lg tokens the help center needs, #382).
 *
 * Stable URL: https://icrealtime.com/css/tokens.css. Every icrealtime.com layout
 * loads it first; HubSpot, SuiteCommerce and Zendesk themes can load it from that
 * URL and use the same custom properties. This file defines values only: no
 * selectors other than :root, no fonts loaded, no resets, so it is safe to add
 * to any page.
 *
 * Changing a value changes every property that uses it. Add tokens; do not
 * rename or remove them without checking the other themes.
 */
:root {
  /* Brand red. red-600 is 6.28:1 on white (AA for any text size). */
  --icr-red-600: #BF1619;
  --icr-red-700: #9E1215;          /* hover / pressed */
  --icr-red-50: #FBEAEA;           /* tint for notices and selected rows */
  --icr-red-300: #FF6B6E;          /* brand red for text on ink surfaces: 5.9:1 on ink-900 (v0.1, #382) */
  --icr-logo-red: #BE2026;         /* the logo artwork only, never UI */

  /* Neutrals, darkest to lightest. ink-400 is the lightest grey allowed for text (4.54:1). */
  --icr-ink-900: #231F20;
  --icr-ink-700: #3A3A3A;
  --icr-ink-500: #626362;
  --icr-ink-400: #767676;
  --icr-line: #CCCCCC;             /* borders and dividers, not text */
  --icr-surface: #F4F4F4;          /* page sections and cards */
  --icr-surface-2: #EAEAEA;        /* a surface hovered or pressed (v0.1, #382) */
  --icr-line-subtle: rgba(35, 31, 32, .10); /* separators inside a surface (v0.1) */
  --icr-highlight: #FFEE9E;        /* search-match highlight behind ink text (v0.1) */
  --icr-scrim: rgba(35, 31, 32, .82); /* behind a dialog or zoomed image (v0.1) */
  --icr-white: #FFFFFF;

  /* Status */
  --icr-success: #1E7D45;
  --icr-warning: #B26B00;
  --icr-info: #1F5FA8;

  /* Semantic aliases: what components use. */
  --icr-color-primary: var(--icr-red-600);
  --icr-color-primary-hover: var(--icr-red-700);
  --icr-color-on-primary: var(--icr-white);
  --icr-color-heading: var(--icr-ink-900);
  --icr-color-text: var(--icr-ink-700);
  --icr-color-text-muted: var(--icr-ink-500);
  --icr-color-text-subtle: var(--icr-ink-400);
  --icr-color-border: var(--icr-line);
  --icr-color-surface: var(--icr-surface);
  --icr-color-link: var(--icr-red-600);

  /* Typography. Roboto Condensed for display (headings, navigation, buttons), Roboto for body text.
     Each property loads its own fonts; these stacks fall back to Arial. */
  --icr-font-display: "Roboto Condensed", "Arial Narrow", Arial, sans-serif;
  --icr-font-body: Roboto, Arial, sans-serif;
  --icr-font-mono: "Roboto Mono", ui-monospace, Menlo, Consolas, monospace; /* values, menu paths, labels (v0.1) */
  --icr-font-size-base: 16px;
  --icr-text-12: 12px;
  --icr-text-14: 14px;
  --icr-text-16: 16px;
  --icr-text-18: 18px;
  --icr-text-24: 24px;
  --icr-text-30: 30px;
  --icr-text-36: 36px;
  --icr-text-48: 48px;
  --icr-weight-regular: 400;
  --icr-weight-bold: 700;

  /* Spacing: a 4px grid. */
  --icr-space-1: 4px;
  --icr-space-2: 8px;
  --icr-space-3: 12px;
  --icr-space-4: 16px;
  --icr-space-5: 20px;
  --icr-space-6: 24px;
  --icr-space-8: 32px;
  --icr-space-10: 40px;
  --icr-space-12: 48px;
  --icr-space-16: 64px;

  /* Radius */
  --icr-radius-0: 0;
  --icr-radius-sm: 4px;
  --icr-radius-md: 8px;
  --icr-radius-lg: 16px;           /* large surfaces: cards, photo tiles, sheets (v0.1) */
  --icr-radius-pill: 999px;

  /* Two shadows: raised (cards, menus) and overlay (dialogs). */
  --icr-shadow-1: 0 1px 3px rgba(35, 31, 32, .12), 0 1px 2px rgba(35, 31, 32, .08);
  --icr-shadow-2: 0 8px 24px rgba(35, 31, 32, .18);

  /* Focus ring: a 2px brand-red outline plus a 3px translucent halo.
     Usage: outline: var(--icr-focus-outline); outline-offset: 0; box-shadow: var(--icr-focus-shadow); */
  --icr-focus-color: var(--icr-red-600);
  --icr-focus-halo: rgba(191, 22, 25, .35);
  --icr-focus-outline: 2px solid var(--icr-focus-color);
  --icr-focus-shadow: 0 0 0 5px var(--icr-focus-halo);

  /* Layout */
  --icr-container: 1200px;
  --icr-container-wide: 1440px;    /* pages with a sidebar: the help center's topic tree (v0.1) */
  --icr-control-height: 44px;      /* minimum height of buttons and fields (touch target) */
}