/* The only file where a colour literal may appear. Everything else uses these tokens.
   Values follow docs/research/classic-ui-spec.md section 2. */
:root {
  /* type and sizes */
  --font-sans: 'Open Sans', Arial, Helvetica, sans-serif;
  --font-size-base: 14px;
  --line-height-base: 1.43;
  --topbar-height: 56px;
  --nav-overhang: 4px;
  --gutter: 20px;
  --radius-badge: 3px;
  --radius-chip: 2px;
  --control-height: 34px;
  --form-panel-width: 1060px;

  /* surfaces */
  --color-page-bg: #f8f8f8;
  --color-surface: #ffffff;
  --color-surface-alt: #f8f8f8;
  --color-surface-sunken: #e6e6e6;
  --color-border: #e6e6e6;
  --color-border-strong: #cccccc;

  /* text */
  --color-text: #333333;
  --color-text-muted: #999999;
  --color-text-inverse: #ffffff;
  --color-label: #666666;
  --color-text-input: #555555;
  --color-text-faint: #cccccc;

  /* links and primary action */
  --color-link: #0088f0;
  --color-link-hover: #005da4;
  --color-primary: #0088f0;
  --color-primary-hover: #0071c7;
  --color-on-primary: #ffffff;
  --color-danger: #cc001e;
  --color-danger-hover: #a30018;
  --color-on-danger: #ffffff;
  --color-focus: #0088f0;
  --color-focus-ring: rgba(0, 136, 240, 0.35);

  /* the rest of the button grammar */
  --color-create: #81bc00;
  --color-create-hover: #659300;
  --color-warning: #ef7d00;
  --color-warning-hover: #c66800;
  --color-cancel: #b3b3b3;
  --color-cancel-hover: #9f9f9f;
  --color-on-button: #ffffff;

  /* top bar and main nav: one charcoal bar */
  --color-topbar-bg: #333333;
  --color-topbar-text: #ffffff;
  --color-topbar-muted: #999999;
  --color-nav-bg: #333333;
  --color-nav-text: #999999;
  --color-nav-hover-bg: #444444;
  --color-nav-active-bg: #0088f0;
  --color-nav-text-shadow: rgba(0, 0, 0, 0.45);
  --color-store-link: #00bdff;
  --color-avatar-bg: #a30094;
  --color-menu-bg: #ffffff;
  --color-menu-hover-bg: #333333;
  --color-menu-hover-text: #ffffff;
  --color-menu-border: #e6e6e6;

  /* tables */
  --color-th-bg: #f8f8f8;
  --color-th-text: #999999;
  --color-th-border: #dddddd;
  --color-th-bar: #999999;
  --color-row-stripe: #ffffff;
  --color-row-hover: #f5f5f5;
  --color-date-band-bar: #e6e6e6;
  --color-shortage-bg: #f1c0c7;

  /* inputs */
  --color-input-bg: #ffffff;
  --color-input-border: #cccccc;
  --color-input-shadow: rgba(0, 0, 0, 0.075);
  --color-addon-bg: #eeeeee;
  --color-toggle-off: #b3b3b3;
  --color-toggle-off-text: #eeeeee;

  /* icons, tiles, overlays */
  --color-pictogram: #cccccc;
  --color-icon-btn: #606060;
  --color-icon-btn-ring: #cccccc;
  --color-tile: #0088f0;
  --color-tile-hover: #0071c7;
  --color-dash-panel: #222222;
  --color-dash-track: #cccccc;
  --color-section-count: #f2a700;
  --color-tag-border: #dddddd;
  --color-shadow: rgba(0, 0, 0, 0.175);
  --color-modal-shadow: rgba(0, 0, 0, 0.5);
  --color-backdrop: rgba(0, 0, 0, 0.5);
  --color-state-seg-on: #999999;
  --color-state-seg-off: #dddddd;
  --color-state-seg-on-inverse: #ffffff;
  --color-state-seg-off-inverse: rgba(255, 255, 255, 0.45);
  --mask-opaque: #000000;

  /* flash bars (solid, white text) */
  --color-flash-success: #659300;
  --color-flash-error: #cc001e;
  --color-flash-info: #0071c7;

  /* semantic trios: background, ink, border (inline notices, not badges) */
  --color-success-bg: #eef6dc;
  --color-success-ink: #3f5c00;
  --color-success-border: #c5e08a;
  --color-error-bg: #f2dede;
  --color-error-ink: #a94442;
  --color-error-border: #ebccd1;
  --color-info-bg: #d9edf7;
  --color-info-ink: #31708f;
  --color-info-border: #bce8f1;
  --color-warn-bg: #fcf8e3;
  --color-warn-ink: #8a6d3b;
  --color-warn-border: #faebcc;
  --color-neutral-bg: #f8f8f8;
  --color-neutral-ink: #666666;
  --color-neutral-border: #dddddd;
  --color-dark-bg: #333333;
  --color-dark-ink: #ffffff;

  /* module colours: main-nav strip and active item (spec 2.2) */
  --module-dashboard: #a30094;
  --module-people: #cc001e;
  --module-opportunities: #ef7d00;
  --module-resources: #00bdff;
  --module-activities: #81bc00;
  --module-reports: #f2a700;
  --module-rfid: var(--module-activities);
  --module-admin: var(--module-reports);

  /* busy heat scale: job planner count row, calendar month heatmap (legacy 6 steps) */
  --heat-1: #fff39c;
  --heat-2: #ffdb2c;
  --heat-3: #ffbc00;
  --heat-4: #ffa300;
  --heat-5: #ff8500;
  --heat-6: #ff3c00;

  /* opportunity state: row bar, state icon (spec 2.3) */
  --state-enquiry: #00bdff;
  --state-draft: #00a0a0;
  --state-quotation: #ef7d00;
  --state-order: #cc001e;

  /* opportunity status badges (spec 2.4) */
  --status-open: #5bc0de;
  --status-provisional: #0088f0;
  --status-reserved: #a30094;
  --status-active: #cc001e;
  --status-invoiced: #81bc00;
  --status-inactive: #999999;

  /* item status badges (spec 2.5) */
  --item-open: #999999;
  --item-reserved: #5bc0de;
  --item-allocated: #ef7d00;
  --item-prepared: #81bc00;
  --item-booked-out: #cc001e;
  --item-part-checked-in: #a30094;
  --item-checked-in: #81bc00;
  --item-completed: #333333;
  --item-deal-price: #cc001e;

  /* item transaction type badges */
  --type-rental: #0050ef;
  --type-sale: #a30094;
  --type-service: #cc001e;

  /* accessory inclusion tags */
  --incl-optional: #5bc0de;
  --incl-default: #81bc00;
  --incl-mandatory: #cc001e;

  /* availability (spec 2.6) */
  --avail-ok: #81bc00;
  --avail-warn: #ed4f00;
  --avail-short: #cc001e;
  --avail-booked: #00a0a0;
  --avail-ok-tint: #a1cd40;
  --avail-warn-tint: #f27b40;
  --avail-short-tint: #d94056;
  --avail-booked-tint: #40b8b8;
  --color-weekend: #e6e6e6;

  /* booking stages (job planner, availability key) */
  --stage-quoted: #00bdff;
  --stage-reserved: #a30094;
  --stage-prep: #a52a2a;
  --stage-load: #2d00d1;
  --stage-delivery: #00a57a;
  --stage-setup: #cc007e;
  --stage-in-use: #f2a700;
  --stage-take-down: #cc007e;
  --stage-pickup: #00a57a;
  --stage-unload: #2d00d1;
  --stage-de-prep: #a52a2a;
  --stage-post-rent: #0088f0;
  --stage-unknown: #999999;
  --stage-quarantine: #9e004f;

  /* dashboard tiles (spec 2.7) */
  --tile-green: #81bc00;
  --tile-orange: #ef7d00;
  --tile-blue: #0088f0;
  --tile-red: #cc001e;
}