:root {
  /* Colours */
  --theme-color-primary: #e26309;
  --theme-color-secondary: #36a9e1;
  --theme-color-tertiary: #fbc100;
  --theme-color-quaternary: #afc538;
  --theme-bg: #000;

  --theme-color-text-primary: #fff;
  --theme-color-text-secondary: #1a1919;

  /* Button */
  --button-bg: var(--theme-color-secondary);
  --button-color: var(--theme-color-text-primary);
  --button-border: var(--theme-color-secondary);
  --button-rounding: 6px;
  --button-icon-width: 16px;
  --button-padding-left: 0.75rem;
  --button-padding-right: 0.75rem;
  --button-padding-top: 0.75rem;
  --button-padding-bottom: 0.75rem;

  /* Link */
  --link-bg: #1678a7;
  --link-color: var(--theme-color-text-primary);
  --link-border: #1678a7;
  --link-rounding: 100px;
  --link-icon-width: 16px;
  --link-padding-left: 0.5rem;
  --link-padding-right: 0.5rem;
  --link-padding-top: 0.25rem;
  --link-padding-bottom: 0.25rem;

  /* Hyperlink */
  --hyperlink-color: #3366cc;

  /* Featured card */
  --featured-card-gap: 0.75rem;
  --featured-card-header-gap: 0.25rem;
  --featured-card-color: var(--theme-color-text-secondary);
  --featured-card-separator-color: var(--theme-color-text-secondary);
  --featured-card-image-rounding: 0px;

  /* Header */
  --header-logo-width: 118px;
  --header-logo-height: 45px;
  --header-bg: var(--theme-bg);

  --header-padding-left: 1.5rem;
  --header-padding-right: 1.5rem;
  --header-padding-top: 1rem;
  --header-padding-bottom: 0.5rem;

  /* Breadcrumbs */
  --breadcrumbs-icon-color: var(--theme-color-text-primary);
  --breadcrumbs-icon-width: 14px;
  --breadcrumbs-link-color: var(--theme-color-text-primary);

  /* Content Layout */
  --container-width: 66rem;

  --content-layout-bg-image-size: 100%;
  --content-layout-bg-image-position: start;

  --content-layout-padding-left: 1.5rem;
  --content-layout-padding-right: 1.5rem;
  --content-layout-padding-top: 3rem;
  --content-layout-padding-bottom: 0rem;

  --content-layout-gap: 3rem;

  /* Guide Content */
  --guide-content-intro-title-color: var(--theme-color-text-secondary);
  --guide-content-intro-summary-color: var(--theme-color-text-secondary);

  --guide-content-intro-blocks-gap: 3rem;
  --guide-content-intro-text-gap: 1.5rem;

  /* Listing */
  --listing-text-color: var(--theme-color-text-secondary);
  --listings-traits-separator-color: var(--theme-color-secondary);
  --listing-traits-tag-border: rgb(from var(--theme-bg) r g b / 12%);
  --listing-traits-tag-icon-color: var(--theme-color-secondary);
  --listing-traits-separator-color: var(--theme-color-secondary);
  --listing-quote-color: var(--theme-color-secondary);
  --listing-separator-color: var(--theme-bg);
  --listing-link-color: var(--theme-color-text-secondary);
  --listing-image-caption-colored-color: var(--theme-color-text-secondary);

  /* Separator */
  --separator-color: rgb(from var(--theme-bg) r g b / 12%);

  /* Aside */
  --aside-header-separator-color: var(--theme-bg);
  --aside-content-separator-color: #7c7c7c;
  --list-element-content-color: var(--theme-color-text-secondary);

  /* Guide Summary */
  --guide-summary-color: var(--theme-color-text-secondary);

  /* Fact */
  --fact-summary-color: var(--theme-color-text-secondary);
  --fact-content-bg: var(--theme-color-secondary);
  --fact-gap: 0rem;
}

.hero-standard {
  --hero-gap: 0rem;
  --hero-title-color: var(--theme-color-text-primary);
  --hero-bg: var(--theme-bg);
  --hero-headers-bg: var(--theme-bg);

  --hero-padding-left: 0rem;
  --hero-padding-right: 0rem;
  --hero-padding-top: 0rem;
  --hero-padding-bottom: 0rem;
}

.hero-two-columns {
  --hero-title-color: var(--theme-color-text-secondary);
  --hero-overview-color: var(--theme-color-text-secondary);
  --hero-bg: var(--theme-bg);
  --hero-headers-bg: transparent;

  --hero-gap: 3rem;
  --hero-text-container-gap: 1.5rem;

  --hero-padding-left: 0rem;
  --hero-padding-right: 0rem;
  --hero-padding-top: 0rem;
  --hero-padding-bottom: 0rem;

  --hero-image-margin-top: 1.5rem;
}

.article-info {
  --article-info-update-color: var(--theme-color-text-secondary);
  --article-info-chip-color: var(--theme-color-text-primary);
  --article-info-chip-gap: 0.25rem;

  --article-info-chip-bg: var(--theme-color-secondary);
  --article-info-chip-border: var(--theme-color-secondary);

  --article-author-logo-bg: var(--theme-color-secondary);
  --article-author-publish-date-color: #7c7c7c;
}

.guide-summary-with-list {
  --guide-summary-gap: 5.5rem;
}

#root-page {
  /* Button */
  --button-bg: var(--theme-color-primary);
  --button-border: var(--theme-color-primary);
  --link-bg: #ba4d00;
  --link-border: #ba4d00;
  --hyperlink-color: #3366cc;
  --listings-traits-separator-color: var(--theme-color-primary);
  --listing-traits-tag-icon-color: var(--theme-color-primary);
  --listing-traits-separator-color: var(--theme-color-primary);
  --listing-quote-color: var(--theme-color-primary);
  --fact-summary-color: var(--theme-color-text-primary);
  --fact-content-bg: var(--theme-color-primary);
  --theme-color-secondary: var(--theme-color-primary);
}

.tag--featured {
  --listing-traits-tag-bg: var(--theme-color-secondary);
  --listing-traits-tag-label-color: var(--theme-color-text-primary);
  --listing-traits-tag-avatar-bg: var(--theme-color-text-primary);
}

/* Rounded Images */
.hero__image,
.listing__image.listing__image.listing__image {
  border-start-start-radius: 40px;
  border-end-end-radius: 40px;
}

.hero__image,
.listing__image,
.list-element__image {
  background-color: var(--theme-color-secondary);
}

.breadcrumbs__link.breadcrumbs__link.breadcrumbs__link {
  font-family: var(--theme-font-button-family, system-ui);
  font-size: var(--theme-font-button-size, 1rem);
  font-weight: var(--theme-font-button-weight, 400);
  line-height: var(--theme-font-button-line-height, 1);
  letter-spacing: var(--theme-font-button-letter-spacing, normal);
}

.breadcrumbs__separator.breadcrumbs__separator.breadcrumbs__separator {
  stroke-width: 3;
}

.listing__image-subtitle.listing__image-subtitle.listing__image-subtitle,
.listing__quote.listing__quote.listing__quote {
  font-family: var(--theme-font-subtitle1-family, system-ui);
  font-size: var(--theme-font-subtitle1-size, 1rem);
  font-weight: var(--theme-font-subtitle1-weight, 400);
  line-height: var(--theme-font-subtitle1-line-height, 1);
  letter-spacing: var(--theme-font-subtitle1-letter-spacing, normal);
}

.aside__header-separator:first-of-type {
  display: none;
}

.breadcrumbs__icon {
  fill: var(--theme-color-secondary);
  stroke: var(--theme-color-secondary);
}

.breadcrumbs__icon > circle {
  fill: var(--theme-bg);
  stroke: var(--theme-bg);
}

.fact__image-card:not(:first-child) {
  display: none;
}

/* Desktop Styles */
@media (width >= 80rem) {
  :root {
    /* Button */
    --button-padding-left: 1rem;
    --button-padding-right: 1rem;
    --button-padding-top: 1rem;
    --button-padding-bottom: 1rem;

    /* Header */
    --header-logo-width: 85px;
    --header-logo-height: 45px;

    --header-padding-left: 3rem;
    --header-padding-right: 3rem;
    --header-padding-top: 2rem;
    --header-padding-bottom: 2rem;

    /* Content Layout */
    --content-layout-padding-left: 7rem;
    --content-layout-padding-right: 7rem;
    --content-layout-padding-top: 4rem;
    --content-layout-padding-bottom: 0rem;
    --content-layout-aside-max-width: 320px;
    --content-layout-gap: 4rem;

    /* Guide Content */
    --guide-content-intro-blocks-gap: 1.5rem;
  }

  .hero-standard {
    --hero-headers-padding-top: 4rem;
    --hero-headers-padding-bottom: 4rem;
  }

  .hero-two-columns {
    --hero-gap: 4.5rem;
    --hero-text-container-gap: 1.5rem;
  }
}