/* About page (Dossier template) adapted to this site's systems.

   1. Type: the template's Tanker / Inter Tight are replaced by Poppins with
      this site's weight rules (huge display 300, headings 400, small
      headings, labels and buttons 500, 600 only for bold text).
   2. Colour: the template's seven colour variables resolve to the theme
      tokens, so the page follows the dark / light toggle like the rest of
      the site.
   3. Header: the template's own header is replaced by the site header
      (partials/header.html, header.css); the hero keeps room for it.
   Loaded after the template stylesheet; the selectors below outrank the
   template's own variable redeclarations on body, h1 and .typography-title. */

html body,
html h1,
html .typography-title {
  --font-family--heading: "Poppins", sans-serif;
  --font-family--paragraph: "Poppins", sans-serif;
  --_typography---heading-01--weight: 300;
  --_typography---heading-02--weight: 400;
  --_typography---heading-03--weight: 400;
  --_typography---heading-04--weight: 500;
  --_typography---heading-05--weight: 500;
  --_typography---heading-06--weight: 500;
  --_typography---text-extra-large--weight: 400;
  --_typography---text-large--weight: 400;
  --_typography---text-medium--weight: 400;
  --_typography---text-small--weight: 400;
  --font-weight--bold: 500;
  --font-weight--semi-bold: 500;
}

html body {
  background-color: var(--bg-primary);
  color: var(--text-primary);
  font-family: "Poppins", sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

html b, html strong { font-weight: 600; }
html h1, html h2, html h3, html h4, html h5, html h6 { font-weight: inherit; }

/* Colour variables onto the theme tokens (dark and light). */
html body {
  --color-style--neutral: var(--text-primary);
  --color-style--dark-gray: var(--text-secondary);
  --color-style--white: var(--bg-primary);
  --color-style--off-white: var(--bg-secondary);
  --color-style--light-gray: var(--bg-muted);
  --color-style--gray: var(--border-primary);
}

/* The template's hero gap (110 to 206px) sat below its own in-flow header;
   with the fixed site header the hero only needs to clear that header. */
.developer-section { padding-top: clamp(96px, 8vw, 120px); }

/* The template's display face (Tanker) has only capital glyphs, so its
   headings read as capitals whatever the source text; Poppins needs the
   transform to keep that look. Same selectors the template gives that face. */
h1,
h2,
h3,
h4,
h5,
h6,
.typography-subtitle,
.typography-title,
.style-guide-title,
.utility-subtitle,
.footer-nav-title,
.footer-cta-title,
.footer-cta-message,
.footer-social-link,
.footer-copy-text,
.pricing-plan,
.pricing-price,
.pricing-subtitle,
.contact-name,
.contact-btn,
.faq-text,
.blog-name,
.testimonial-name,
.testimonial-name.review,
.testimonial-num-text,
.testimonial-num-text.review,
.works-tab-link,
.works-heading,
.works-inform-text,
.works-inform-link,
.works-name,
.why-subtitle,
.work-subtitle,
.award-name,
.award-title,
.award-info,
.services-num,
.services-title,
.featured-name,
.leaders-name,
.faq-details:where(.w-variant-6ff19547-481c-e071-94e0-f76e0ea99455),
.designer-heading,
.designer-subtitle-text,
.counter-title,
.counter-text,
.started-subtitle,
.started-name,
.feedback-name,
.website-wrap,
.dossier-info-title,
.dossier-except,
.developer-heading,
.developer-subtitle,
.case-heading,
.case-text,
.case-increase-num,
.end-nav-title,
.cta-button,
.closing-title,
.closing-button,
.closing-nav-title,
.footer-cta-button,
.dossier-title,
.provide-subtitle-text,
.provide-title,
.blog-text,
.popular-toggle,
.selected-name,
.recognition-num,
.recognition-name,
.cursor,
.why-subtitle, .work-subtitle {
  text-transform: uppercase;
}

/* The template's paper-texture backgrounds are light images; in dark mode
   the sections fall back to the theme surface so text stays readable. */
:root[data-theme="dark"] .footer-section,
:root[data-theme="dark"] .review-section,
:root[data-theme="dark"] .blog-section:where(.w-variant-6157a192-cfb9-447a-973c-db3bfe3c9d78),
:root[data-theme="dark"] .designer-section,
:root[data-theme="dark"] .website-section,
:root[data-theme="dark"] .popular-section,
:root[data-theme="dark"] .developer-section,
:root[data-theme="dark"] .cta-section,
:root[data-theme="dark"] .end-section,
:root[data-theme="dark"] .provide-section {
  background-image: none;
}