/*
  Knowledge Fabric: colours.

  The home page and the two deck pages take their colour scheme from the logo, in place of the
  violet the site used before (the site before this change is tagged devfest). The scheme was
  built as www/v3 and replaced the root pages in one change; this file is its colour layer.

  The logo has two colours, and every colour here is drawn from them:
    mark blue      #2C7BE5   the four threads
    wordmark navy  #12263F   "KnowledgeFabric"

  The mark blue is 4.1:1 against white, just short of the 4.5:1 that small white button text
  needs, so buttons and links use the same hue a shade deeper (5.0:1 on white).

  Load this after page.min.css and style.css.
*/

:root {
  --kf-blue: #1B6CDA;        /* the mark's blue, deepened for text: buttons, links, step numbers (was violet #735DF2) */
  --kf-blue-deep: #1451A3;   /* hover and pressed states */
  --kf-logo-blue: #2C7BE5;   /* the mark's own blue: text selection */
  --kf-navy: #12263F;        /* the wordmark's navy: headings, the pilot section and the deck's challenge cards (was #2A2359, and red #C43B4C on the cards) */
  --kf-blue-tint: #E6F0FC;   /* step badges (was lavender #EDE9FC) and the deck's challenge icons (was pink #FDEDEF) */
  --kf-blue-wash: #F1F6FD;   /* the cost panel (was #F5F3FF) */
  --kf-blue-line: #CFE0F7;   /* the cost panel's border (was #E0DAF5) */
  --kf-line: #DDE4EE;        /* card borders, a cool grey in the logo's hue (was #e0e0e0) */
  --kf-linkedin: #0A66C2;    /* LinkedIn's own blue, for its logo on the contact card only */

  /* The theme's own primary, read by Bootstrap components */
  --blue: var(--kf-blue);
  --primary: var(--kf-blue);
}

/* The theme's primary was a royal blue (#0a2dc9) that isn't the logo's; these are its rules
   from page.min.css that the v3 pages can show, with the logo's blue in its place. */
a,
a:hover,
a:focus,
.btn-link,
.nav-link.active,
.nav-item.show .nav-link,
.link-color-default a:hover,
.link-color-default a:focus,
h1 a:hover, h2 a:hover, h3 a:hover, h4 a:hover, h5 a:hover, h6 a:hover {
  color: var(--kf-blue);
}

.text-primary {
  color: var(--kf-blue) !important;
}

.bg-primary {
  background-color: var(--kf-blue) !important;
}

.border-primary {
  border-color: var(--kf-blue) !important;
}

.badge-primary,
.btn-primary,
.btn-primary.disabled,
.btn-primary:disabled {
  background-color: var(--kf-blue);
  border-color: var(--kf-blue);
  color: #fff;
}

.btn-primary:hover,
.btn-primary:not([disabled]):not(.disabled):active,
.btn-primary:not([disabled]):not(.disabled).active {
  background-color: var(--kf-blue-deep);
  border-color: var(--kf-blue-deep);
  box-shadow: 0 1px 10px rgba(27, 108, 218, 0.4);
}

.btn-outline-primary {
  color: var(--kf-blue);
  border-color: var(--kf-blue);
}

.btn-outline-primary:hover,
.btn-outline-primary:not([disabled]):not(.disabled):active,
.btn-outline-primary:not([disabled]):not(.disabled).active {
  color: #fff;
  background-color: var(--kf-blue);
  border-color: var(--kf-blue);
  box-shadow: 0 1px 10px rgba(27, 108, 218, 0.4);
}

::selection {
  background: var(--kf-logo-blue);
  color: #fff;
}