:root {
  --_co-cover-image-height: calc(var(--op-size-unit) * 75); /* 300px */

  /* #142a3e */
  --op-color-primary-h: 208;
  --op-color-primary-s: 52%;
  --op-color-primary-l: 16%;

  --op-font-family: 'Tofino Text', 'Noto Sans', sans-serif;
  --op-font-family-header: 'Tofino', 'Noto Sans', sans-serif;

  --_co-navbar-height: calc(var(--op-size-unit) * 17); /* 68px */

  --op-radius-3x-large: 20px;

  --op-color-background: var(--op-color-neutral-plus-max);
  --op-color-on-background: var(--op-color-neutral-on-plus-max);
  --op-color-on-background-alt: var(--op-color-neutral-on-plus-max-alt);

  --op-color-border: var(--op-color-neutral-plus-three);
}

/* Lexxy Mapping */
:root {
  /* Colors */
  --lexxy-color-ink: var(--op-color-neutral-minus-seven);
  --lexxy-color-ink-medium: var(--op-color-neutral-minus-three);
  --lexxy-color-ink-light: var(--op-color-neutral-plus-one);
  --lexxy-color-ink-lighter: var(--op-color-neutral-plus-four);
  --lexxy-color-ink-lightest: var(--op-color-neutral-plus-six);
  --lexxy-color-ink-inverted: var(--op-color-neutral-plus-eight);

  --lexxy-color-accent-dark: var(--op-color-primary-plus-one);
  --lexxy-color-accent-medium: var(--op-color-primary-plus-two);
  --lexxy-color-accent-lightest: var(--op-color-primary-plus-five);

  --lexxy-color-code-token-punctuation: var(--op-color-neutral-minus-seven);

  --lexxy-color-red: var(--op-color-alerts-danger-base);
  --lexxy-color-green: var(--op-color-alerts-notice-base);
  --lexxy-color-blue: var(--op-color-alerts-info-base);

  /* Typography */
  --lexxy-font-base: var(--op-font-family);
  --lexxy-font-mono: var(--op-font-family-alt);
  --lexxy-text-small: var(--op-font-2x-small);
  --lexxy-content-margin: var(--op-space-scale-unit);

  /* Focus ring */
  --lexxy-focus-ring-offset: var(--op-border-width-large);
  --lexxy-focus-ring-size: var(--op-border-width-large);
}

/* WebAwesome Mapping */
:where(:root),
.wa-brand-blue {
  --wa-color-brand-95: var(--op-color-primary-plus-seven);
  --wa-color-brand-90: var(--op-color-primary-plus-five);
  --wa-color-brand-80: var(--op-color-primary-plus-four);
  --wa-color-brand-70: var(--op-color-primary-plus-three);
  --wa-color-brand-60: var(--op-color-primary-plus-two);
  --wa-color-brand-50: var(--op-color-primary-plus-one);
  --wa-color-brand-40: var(--op-color-primary-base);
  --wa-color-brand-30: var(--op-color-primary-minus-two);
  --wa-color-brand-20: var(--op-color-primary-minus-five);
  --wa-color-brand-10: var(--op-color-primary-minus-seven);
  --wa-color-brand-05: var(--op-color-primary-minus-eight);
  --wa-color-brand: var(--op-color-primary-original);
  --wa-color-brand-on: var(--op-color-white);
}

:where(:root),
.wa-neutral-gray {
  --wa-color-neutral-95: var(--op-color-neutral-plus-seven);
  --wa-color-neutral-90: var(--op-color-neutral-plus-five);
  --wa-color-neutral-80: var(--op-color-neutral-plus-four);
  --wa-color-neutral-70: var(--op-color-neutral-plus-three);
  --wa-color-neutral-60: var(--op-color-neutral-plus-two);
  --wa-color-neutral-50: var(--op-color-neutral-plus-one);
  --wa-color-neutral-40: var(--op-color-neutral-base);
  --wa-color-neutral-30: var(--op-color-neutral-minus-two);
  --wa-color-neutral-20: var(--op-color-neutral-minus-five);
  --wa-color-neutral-10: var(--op-color-neutral-minus-seven);
  --wa-color-neutral-05: var(--op-color-neutral-minus-eight);
  --wa-color-neutral: var(--op-color-neutral-original);
  --wa-color-neutral-on: var(--op-color-white);
}

:root {
  --wa-color-surface-raised: var(--op-color-neutral-plus-seven);
  --wa-color-surface-default: var(--op-color-neutral-plus-eight);
  --wa-color-overlay-modal: transparent;

  --wa-font-family-body: var(--op-font-family);
  --wa-font-family-heading: var(--op-font-family-header);
  --wa-font-family-code: var(--op-font-family-alt);

  --wa-font-size-2xs: var(--op-font-2x-small);
  --wa-font-size-xs: var(--op-font-x-small);
  --wa-font-size-s: var(--op-font-small);
  --wa-font-size-m: var(--op-font-medium);
  --wa-font-size-l: var(--op-font-large);
  --wa-font-size-xl: var(--op-font-x-large);
  --wa-font-size-2xl: var(--op-font-2x-large);
  --wa-font-size-3xl: var(--op-font-3x-large);
  --wa-font-size-4xl: var(--op-font-4x-large);

  --wa-font-weight-light: var(--op-font-weight-light);
  --wa-font-weight-normal: var(--op-font-weight-normal);
  --wa-font-weight-semibold: var(--op-font-weight-semi-bold);
  --wa-font-weight-bold: var(--op-font-weight-bold);

  --wa-line-height-condensed: var(--op-line-height-denser);
  --wa-line-height-normal: var(--op-line-height-base);
  --wa-line-height-expanded: var(--op-line-height-loosest);

  --wa-space-3xs: var(--op-space-3x-small);
  --wa-space-2xs: var(--op-space-2x-small);
  --wa-space-xs: var(--op-space-x-small);
  --wa-space-s: var(--op-space-small);
  --wa-space-m: var(--op-space-medium);
  --wa-space-l: var(--op-space-large);
  --wa-space-xl: var(--op-space-x-large);
  --wa-space-2xl: var(--op-space-2x-large);
  --wa-space-3xl: var(--op-space-3x-large);
  --wa-space-4xl: var(--op-space-4x-large);

  --wa-border-width-s: var(--op-border-width);
  --wa-border-width-m: var(--op-border-width-large);
  --wa-border-width-l: var(--op-border-width-x-large);

  --wa-border-radius-s: var(--op-radius-small);
  --wa-border-radius-m: var(--op-radius-medium);
  --wa-border-radius-l: var(--op-radius-large);

  --wa-shadow-s: var(--op-shadow-small);
  --wa-shadow-m: var(--op-shadow-medium);
  --wa-shadow-l: var(--op-shadow-large);

  --wa-form-control-height: var(--op-input-height-large);
  --wa-form-control-border-color: var(--op-color-border);
}