/*
  KScore brand layer
  Load after the theme CSS (bootstrap, bootstrap-extended, sass/*).
  Colours are sampled from the original logo artwork (assets/images/brand/kscore-hero.jpg).

  Index
  --tokens
  --bootstrap mapping (light / dark)
  --typography
*/

/* tokens */

:root {
  /* light & night: the logo's black stage and electric-blue light arc */
  --ks-black: #000000;
  --ks-night: #030817;
  --ks-navy-950: #050b1f;
  --ks-navy-900: #0a1633;
  --ks-navy-800: #0f1f47;
  --ks-navy-700: #16295c;
  --ks-blue-900: #001652;
  --ks-blue-700: #0039d4;
  --ks-blue-600: #0050f1;
  --ks-blue-500: #0060fa;
  --ks-blue-400: #2f7bff;
  --ks-blue-300: #6eb3ff;
  --ks-blue-200: #b2ddff;
  --ks-blue-50: #eaf2ff;

  /* risk spectrum: the gauge bars, the K and the ring (low risk -> high risk) */
  --ks-green-deep: #76ad35;
  --ks-green: #94b830;
  --ks-yellow: #fdc018;
  --ks-orange: #f5922f;
  --ks-red: #e9473a;
  --ks-crimson: #a4222e;

  /* text-safe versions of the spectrum (4.5:1 on white) */
  --ks-green-text: #557a12;
  --ks-yellow-text: #8a6400;
  --ks-orange-text: #b4520a;
  --ks-red-text: #c2281c;

  --ks-spectrum: linear-gradient(90deg, #76ad35 0%, #94b830 18%, #fdc018 42%, #f5922f 62%, #e9473a 80%, #a4222e 100%);
  --ks-k-gradient: linear-gradient(180deg, #98b82e 0%, #d3c119 42%, #fdc018 66%, #ef7f36 100%);
  --ks-arc-gradient: linear-gradient(135deg, #001652 0%, #0039d4 45%, #0060fa 70%, #6eb3ff 100%);

  --ks-font-display: 'Urbanist', 'Noto Sans', sans-serif;
  --ks-font-body: 'Noto Sans', sans-serif;

  --ks-radius-sm: 10px;
  --ks-radius: 14px;
  --ks-radius-lg: 22px;
  --ks-shadow-sm: 0 1px 2px rgba(10, 22, 51, .06);
  --ks-shadow: 0 12px 32px -12px rgba(10, 22, 51, .18);
  --ks-shadow-glow: 0 10px 30px -10px rgba(0, 96, 250, .55);
  --ks-ease: cubic-bezier(.22, .61, .36, 1);

  /* surfaces (light) */
  --ks-bg: #f3f6fb;
  --ks-surface: #ffffff;
  --ks-surface-2: #f7f9fd;
  --ks-border: #e3e8f2;
  --ks-ink: #0a1633;
  --ks-text: #4a5672;
  --ks-muted: #7a869f;
  --ks-link: #0060fa;
  --ks-focus-ring: 0 0 0 4px rgba(0, 96, 250, .18);
}

[data-bs-theme=dark] {
  --ks-bg: #030817;
  --ks-surface: #0a1430;
  --ks-surface-2: #0e1a3d;
  --ks-border: rgba(110, 179, 255, .14);
  --ks-ink: #f2f6fd;
  --ks-text: #c3cee3;
  --ks-muted: #8796b4;
  --ks-link: #6eb3ff;
  --ks-focus-ring: 0 0 0 4px rgba(110, 179, 255, .22);
  --ks-shadow: 0 16px 40px -16px rgba(0, 0, 0, .7);
}


/* bootstrap mapping */

:root,
[data-bs-theme=light] {
  --bs-primary: #0060fa;
  --bs-primary-rgb: 0, 96, 250;
  --bs-primary-text-emphasis: #003b9c;
  --bs-primary-bg-subtle: #eaf2ff;
  --bs-primary-border-subtle: #b2ddff;
  --bs-link-color: #0060fa;
  --bs-link-color-rgb: 0, 96, 250;
  --bs-link-hover-color: #0047c2;
  --bs-link-hover-color-rgb: 0, 71, 194;
  --bs-body-bg: #f3f6fb;
  --bs-body-color: #4a5672;
  --bs-heading-color: #0a1633;
  --bs-border-color: #e3e8f2;
  --bs-focus-ring-color: rgba(0, 96, 250, .25);
}

[data-bs-theme=dark] {
  --bs-primary: #2f7bff;
  --bs-primary-rgb: 47, 123, 255;
  --bs-primary-text-emphasis: #6eb3ff;
  --bs-primary-bg-subtle: #071a44;
  --bs-primary-border-subtle: #0039d4;
  --bs-link-color: #6eb3ff;
  --bs-link-color-rgb: 110, 179, 255;
  --bs-link-hover-color: #b2ddff;
  --bs-link-hover-color-rgb: 178, 221, 255;
  --bs-body-bg: #050b1f;
  --bs-body-bg-2: #030817;
  --bs-body-bg-rgb: 5, 11, 31;
  --bs-body-color: #c3cee3;
  --bs-body-color-rgb: 195, 206, 227;
  --bs-heading-color: #f2f6fd;
  --bs-secondary-bg: #0e1a3d;
  --bs-tertiary-bg: #0a1430;
  --bs-border-color: rgba(110, 179, 255, .14);
  --bs-border-color-translucent: rgba(110, 179, 255, .12);
  --bs-focus-ring-color: rgba(110, 179, 255, .3);
}

.btn-primary {
  --bs-btn-bg: #0060fa;
  --bs-btn-border-color: #0060fa;
  --bs-btn-hover-bg: #0050f1;
  --bs-btn-hover-border-color: #0050f1;
  --bs-btn-active-bg: #0039d4;
  --bs-btn-active-border-color: #0039d4;
  --bs-btn-disabled-bg: #0060fa;
  --bs-btn-disabled-border-color: #0060fa;
  --bs-btn-focus-shadow-rgb: 0, 96, 250;
}

.form-check-input:checked {
  background-color: #0060fa;
  border-color: #0060fa;
}


/* typography */

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6,
.ks-display {
  font-family: var(--ks-font-display);
  letter-spacing: -.01em;
}

.ks-eyebrow {
  font-family: var(--ks-font-display);
  font-weight: 500;
  font-size: .75rem;
  letter-spacing: .18em;
  text-transform: uppercase;
}

.ks-logo {
  display: block;
  height: auto;
  overflow: visible;
}