/*!
 * ICR Core design tokens, v0 (#312, from the #268 design proposal).
 *
 * 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-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-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-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-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-control-height: 44px;      /* minimum height of buttons and fields (touch target) */
}