:root {
  color-scheme: light;
  --brand-primary: #169dda;
  --brand-primary-strong: #087fb9;
  --brand-primary-soft: #e9f5fa;
  --brand-accent: #ff6b5e;
  --brand-ink: #09243b;
  --brand-text-primary: #09243b;
  --brand-text-secondary: #465f70;
  --brand-text-tertiary: #7b909d;
  --brand-text-inverse: #ffffff;
  --brand-bg-global: #f5fafd;
  --brand-bg-card: #ffffff;
  --brand-bg-raised: #f8fcfe;
  --brand-border: #d8e3ea;
  --brand-shadow-soft: 4px 4px 0 rgba(22, 157, 218, 0.14);
  --brand-radius-card: 8px;
  --brand-radius-control: 6px;
  --brand-font-sans: "Avenir Next", Avenir, "Segoe UI", Helvetica, sans-serif;
  --brand-font-reading: Georgia, "Times New Roman", serif;
}

html {
  min-height: 100%;
  background: var(--brand-bg-global);
}

body {
  min-height: 100%;
  margin: 0;
  background: var(--brand-bg-global);
  color: var(--brand-text-primary);
  font-family: var(--brand-font-sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

button,
input,
select,
textarea {
  font: inherit;
}

#loading {
  background:
    linear-gradient(rgba(22, 157, 218, 0.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(22, 157, 218, 0.055) 1px, transparent 1px),
    var(--brand-bg-global) !important;
  background-size: 28px 28px !important;
}

#loading__text {
  color: var(--brand-text-secondary);
}

::selection {
  background: var(--brand-primary-soft);
  color: var(--brand-ink);
}