/* Concept A · Folio: one family of translucent paper planes. */
@layer classic-backgrounds {
  html:not([data-catalog-skin="glass"]) body.office-catalog-dle {
    --folio-art: url("./office-folio-art.svg");
  }

  /* Product surfaces: brand light is local, with open white space between sections. */
  html:not([data-catalog-skin="glass"]) body.office-catalog-dle > main#top.product-page {
    --folio-hero-glow: color-mix(in srgb, var(--product-brand, #567485) 8%, transparent);
    --folio-versions-glow: color-mix(in srgb, var(--product-brand, #567485) 7%, transparent);
    --folio-feature-glow: color-mix(in srgb, var(--product-brand, #567485) 10%, transparent);
    --folio-faq-halo: color-mix(in srgb, var(--product-brand, #567485) 10%, transparent);
  }

  html:not([data-catalog-skin="glass"]) body.office-catalog-dle > main.catalog-home-page > #office-platforms.ch-word-hero {
    background: var(--folio-art) right -265px top -20px / 1000px auto no-repeat,
      linear-gradient(113deg, #f6f9fa 0%, #eaf3f8 56%, #e8f2f1 100%) !important;
  }
  html:not([data-catalog-skin="glass"]) body.office-catalog-dle:has(main#top.product-page) > main#top > .hero.hero-second-screen {
    background: var(--folio-art) right -265px top -20px / 1000px auto no-repeat,
      radial-gradient(850px 650px at -9% -6%, var(--folio-hero-glow) 0%, transparent 76%),
      linear-gradient(110deg, #fcfefd 0%, #f9fcfe 55%, #fdfefd 100%) !important;
  }
  html:not([data-catalog-skin="glass"]) body.office-catalog-dle > main.catalog-home-page > #office-versions {
    background: linear-gradient(125deg, #fffefd 0%, #f8fafb 61%, #edf4f8 100%) !important;
  }
  html:not([data-catalog-skin="glass"]) body.office-catalog-dle:has(main#top.product-page) > main#top > #versions {
    background: radial-gradient(720px 430px at 105% 0%, var(--folio-versions-glow) 0%, transparent 76%),
      linear-gradient(125deg, #fff 0%, #fdfefe 58%, #f8fbfd 100%) !important;
  }
  html:not([data-catalog-skin="glass"]) body.office-catalog-dle > main.catalog-home-page > #home-platforms.platform-choice-home {
    background: var(--folio-art) right -475px top -260px / 880px auto no-repeat,
      linear-gradient(120deg, #ecf5f1 0%, #f6faf8 58%, #f1f6f6 100%) !important;
  }
  html:not([data-catalog-skin="glass"]) body.office-catalog-dle:has(main#top.product-page) > main#top > #features {
    background: var(--folio-art) right -475px top -260px / 880px auto no-repeat,
      radial-gradient(760px 570px at -8% 8%, var(--folio-feature-glow) 0%, transparent 77%),
      linear-gradient(118deg, #fcfefd 0%, #fff 53%, #f9fcfd 100%) !important;
  }
  html:not([data-catalog-skin="glass"]) body.office-catalog-dle > main.catalog-home-page > #office-apps,
  html:not([data-catalog-skin="glass"]) body.office-catalog-dle:has(main#top.product-page) > main#top > :is(.program-facts, #requirements) {
    background: linear-gradient(115deg, #fbfaf8 0%, #fff 52%, #f5f8fa 100%) !important;
  }
  html:not([data-catalog-skin="glass"]) body.office-catalog-dle > main.catalog-home-page > #faq.faq-section {
    background: var(--folio-art) right -430px bottom -540px / 880px auto no-repeat,
      linear-gradient(112deg, #eff5f2 0%, #f8faf7 63%, #edf4f3 100%) !important;
  }
  html:not([data-catalog-skin="glass"]) body.office-catalog-dle:has(main#top.product-page) > main#top > #faq.faq-section {
    background: radial-gradient(620px 380px at 100% 100%, var(--folio-faq-halo) 0%, transparent 78%),
      linear-gradient(112deg, #fffefa 0%, #fdfbf8 60%, #faf9f5 100%) !important;
  }

  html:not([data-catalog-skin="glass"]) body.office-catalog-dle main#top.app-detail-page--apps > #versions.apps-catalog-section {
    background: var(--folio-art) right -335px top -310px / 900px auto no-repeat,
      linear-gradient(112deg, #f7fafb 0%, #fff 52%, #f5f8f9 100%) !important;
  }
  html:not([data-catalog-skin="glass"]) body.office-catalog-dle main#top.office-versions-page.ov-native-catalog-page {
    background: var(--folio-art) right -340px top -210px / 960px auto no-repeat,
      linear-gradient(120deg, #f3f8f9 0%, #fffefd 50%, #f3f8f6 100%) !important;
  }
  html:not([data-catalog-skin="glass"]) body.office-catalog-dle main#top[data-product="office-platforms"] > #platforms-catalog.platform-choice {
    background: var(--folio-art) right -270px top -235px / 990px auto no-repeat,
      linear-gradient(125deg, #ecf5f8 0%, #fff 54%, #f0f7f2 100%) !important;
  }
  html:not([data-catalog-skin="glass"]) body.office-catalog-dle main#top.office-download-hub > .download-hub-hero {
    background: var(--folio-art) right -295px top -195px / 940px auto no-repeat,
      linear-gradient(115deg, #f2f8fa 0%, #fffefd 50%, #f2f7f3 100%) !important;
  }
  @media (max-width: 700px) {
    html:not([data-catalog-skin="glass"]) body.office-catalog-dle > main.catalog-home-page > #office-platforms.ch-word-hero {
      background-size: 530px auto, auto !important;
      background-position: right -275px top -50px, center !important;
    }
    html:not([data-catalog-skin="glass"]) body.office-catalog-dle:has(main#top.product-page) > main#top > .hero.hero-second-screen {
      background-size: 530px auto, auto, auto !important;
      background-position: right -275px top -50px, center, center !important;
    }
    html:not([data-catalog-skin="glass"]) body.office-catalog-dle > main.catalog-home-page > #home-platforms.platform-choice-home,
    html:not([data-catalog-skin="glass"]) body.office-catalog-dle > main.catalog-home-page > #faq.faq-section,
    html:not([data-catalog-skin="glass"]) body.office-catalog-dle main#top.app-detail-page--apps > #versions.apps-catalog-section,
    html:not([data-catalog-skin="glass"]) body.office-catalog-dle main#top.office-versions-page.ov-native-catalog-page,
    html:not([data-catalog-skin="glass"]) body.office-catalog-dle main#top[data-product="office-platforms"] > #platforms-catalog.platform-choice,
    html:not([data-catalog-skin="glass"]) body.office-catalog-dle main#top.office-download-hub > .download-hub-hero {
      background-size: 510px auto, auto !important;
      background-position: right -300px top -100px, center !important;
    }
    html:not([data-catalog-skin="glass"]) body.office-catalog-dle:has(main#top.product-page) > main#top > #features {
      background-size: 510px auto, auto, auto !important;
      background-position: right -300px top -100px, center, center !important;
    }
  }
}

/* The same flat graphite ending on every catalog route. */
@layer classic-backgrounds {
  body.office-catalog-dle > footer.footer,
  html:not([data-catalog-skin="glass"]) body.office-catalog-dle:is(:has(main#top.product-page), :has(main.catalog-home-page)) > footer.footer {
    --light-ink: #f4f6f7 !important;
    --light-muted: #c4cdd4 !important;
    --light-line: rgba(234, 240, 244, .18) !important;
    --light-brand: #fff !important;
    color: #c4cdd4 !important;
    background: #26323d !important;
    border-top: 1px solid #17232d !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08) !important;
  }

  body.office-catalog-dle > footer.footer::before,
  body.office-catalog-dle > footer.footer::after {
    content: none !important;
    display: none !important;
  }

  body.office-catalog-dle > footer.footer :is(h3, .ms-brand, strong) {
    color: #f4f6f7 !important;
  }
  body.office-catalog-dle > footer.footer :is(p, a, .footer-list, .legal-link-sep) {
    color: #c4cdd4 !important;
  }
  body.office-catalog-dle > footer.footer a:is(:hover, :focus-visible) {
    color: #fff !important;
  }
  body.office-catalog-dle > footer.footer .legal {
    color: #aebac3 !important;
    border-top-color: rgba(234, 240, 244, .18) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .045) !important;
  }
  body.office-catalog-dle > footer.footer .legal :is(a, .legal-link-sep) {
    color: #aebac3 !important;
  }
  body.office-catalog-dle > footer.footer .legal a:is(:hover, :focus-visible) {
    color: #fff !important;
  }
  body.office-catalog-dle > footer.footer a:focus-visible {
    outline-color: #d8e9f8 !important;
  }
}