/* Forward Thrive Community demo server: shared tokens, type and controls. */

@font-face {
  font-family: "Bariol";
  src: url("fonts/bariol-light.ttf") format("truetype");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Bariol";
  src: url("fonts/bariol-regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Bariol";
  src: url("fonts/bariol-bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Brand */
  --navy: #1F2A44;
  --magenta: #B52555;
  --magenta-strong: #9C1F49;
  --cyan: #0077C8;
  --cyan-strong: #00609F;
  --green: #00A499;

  /* Light theme */
  --ground: #E8ECF1;
  --card: #FFFFFF;
  --card-edge: rgba(31, 42, 68, 0.08);
  --ink: #1F2A44;
  --ink-2: #4A5468;
  --ink-3: #5B667B;
  --line: #E3E7EE;
  --line-strong: #7A859B;
  --field: #FFFFFF;
  --chip: #E6F1FA;
  --chip-ink: #006FBB;
  --link: #006FBB;
  --focus: #0077C8;
  --error-bg: #FCECF1;
  --error-line: #B52555;
  --error-ink: #7D1739;
  --shadow: 0 1px 2px rgba(15, 23, 42, 0.05), 0 6px 20px rgba(15, 23, 42, 0.06);
  --series: #0077C8;
  --grid: #E3E7EE;
  --axis: #C9D0DB;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root {
    --ground: #0B0E15;
    --card: #141923;
    --card-edge: rgba(255, 255, 255, 0.08);
    --ink: #E8ECF1;
    --ink-2: #B3BCCB;
    --ink-3: #98A2B3;
    --line: #262E3D;
    --line-strong: #6B7790;
    --field: #0E121A;
    --chip: #1B2A3D;
    --chip-ink: #5AA9E8;
    --link: #5AA9E8;
    --focus: #4BA3E3;
    --error-bg: #3B1424;
    --error-line: #E0577F;
    --error-ink: #FFD3DF;
    --shadow: none;
    --series: #0077C8;
    --grid: #262E3D;
    --axis: #3A4456;
    color-scheme: dark;
  }
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: "Bariol", "Avenir Next", "Segoe UI", system-ui, -apple-system, sans-serif;
  font-weight: 400;
  font-size: 17px;
  line-height: 1.45;
  color: var(--ink);
  background: var(--ground);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, p {
  margin: 0;
}

img {
  max-width: 100%;
}

a {
  color: var(--link);
  text-decoration: none;
}

a:hover,
a:focus,
a:active {
  text-decoration: none;
}

:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
}

[hidden] {
  display: none !important;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* Buttons always set their own background and colour. */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;
  padding: 0 20px;
  border: 0;
  border-radius: 12px;
  font: inherit;
  font-weight: 700;
  font-size: 17px;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  background: var(--chip);
  color: var(--chip-ink);
  -webkit-tap-highlight-color: transparent;
}

.btn:hover,
.btn:focus,
.btn:active {
  text-decoration: none;
}

.btn:active {
  transform: translateY(1px);
}

.btn-primary {
  background: var(--magenta);
  color: #FFFFFF;
}

.btn-primary:hover {
  background: var(--magenta-strong);
  color: #FFFFFF;
}

.btn-block {
  display: flex;
  width: 100%;
}

.btn-secondary {
  background: var(--chip);
  color: var(--chip-ink);
}

.btn-secondary:hover {
  background: var(--chip);
  color: var(--ink);
}

.btn-cyan {
  background: var(--cyan);
  color: #FFFFFF;
}

.btn-cyan:hover {
  background: var(--cyan-strong);
  color: #FFFFFF;
}

.btn-quiet {
  min-height: 44px;
  padding: 0 16px;
  background: var(--chip);
  color: var(--chip-ink);
}

.btn-quiet:hover {
  background: var(--chip);
  color: var(--ink);
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition: none !important;
    animation: none !important;
  }
}