/*
  BRAND TYPE OVERRIDE FOR THE CLONED MARKETING PAGES.

  HAND-WRITTEN. Unlike `shared.css` and the per-page shards in `shards/`, this
  file is NOT generated — `yarn build:shopify-css` does not touch it, so it
  survives a regeneration of the island. That is the whole reason it is a
  separate file rather than a patch to the generated one.

  WHAT IT FIXES. `audit:typeface` measured every public route against `/`:

      55 routes   heading Inter-Variable, homepage heading is Faktum
       6 routes   Inter-Variable, weight 550
       2 routes   Inter-Variable, weight 500

  Sixty-three cloned pages set their headings in the BODY face while the front
  door sets its in Faktum. Size and weight were already right on most of them
  (the h1 on /analytics measures 64px at weight 330, which is the brand's
  display type exactly) — the face alone was carrying the whole difference, and
  it is the difference a reader sees first.

  WHY A TOKEN AND NOT A RULE. Every clone heading resolves its family through
  `--font-component-heading-group-heading`, which the island defines as
  `var(--font-base)`. Redefining the custom property inherits down to every
  heading on the page without competing with a single one of the island's
  rules — no specificity war, and nothing to re-check when the island is
  regenerated with different selectors.

  WHY `enterprise` IS EXCLUDED. `/` and `/enterprise` are the same page, and
  that page is the reference this whole audit compares against. It is already
  almost entirely Faktum; the only headings this would change there are two
  16px section labels, and moving the front door to fix pages that are supposed
  to match the front door is backwards. If those two labels should change, that
  is a decision about the homepage, made on the homepage.

  LOADED BY components/shopify-pages/marketing-shell.tsx, as a <link> AFTER the
  island's own. Source order matters: two of the island's rules define this
  token at (0,3,0), which ties the selector below, and the later sheet wins.
*/

/*
  NO @font-face HERE, DELIBERATELY.

  The first version of this file declared the four Faktum weights, on the
  assumption that only the enterprise page had them. It does not: the generated
  island already ships them, and so does every per-page shard — verified by
  grepping both, and then in the browser, where /analytics registered NINE
  Faktum faces, two overlapping sets of the same files. The duplicates cost no
  download (same family, same URLs, deduped) but they are dead CSS on sixty-odd
  pages and the kind of thing someone later has to work out is redundant.

  The two places that DO declare Faktum are the ones whose pages never load the
  island: app/home-shopify.css for the content hubs, the legal pages and
  /about-us, and app/pricing-shopify/pricing-shopify.css for /pricing.
*/

/*
  The token, on every clone page except the reference one.

  `[data-page]` is what each clone root carries, so this reaches the page scope
  the island's own `:root`-ish rules define the token on, one step above them.
*/
.sq-shopify [data-page]:not([data-page="enterprise"]) {
    --font-component-heading-group-heading: "Faktum", "Inter-Variable", Helvetica, Arial, sans-serif;
}

/*
  THE TOKEN ONLY REACHES THE PAGES THAT GO THROUGH IT.

  Measured after the rule above shipped: it converted 38 of the 63 clone pages
  and left 28 untouched. Those 28 do not resolve a heading token at all — their
  h1 carries no font-family rule of its own and simply INHERITS from a section
  wrapper. /affiliates is typical: `<h1 class="richtext smd:text-dsp text-t2">`,
  96px at weight 300, family inherited as `--font-base`. Correct size, correct
  weight, wrong face — and no token in the chain to redefine.

  So headings are also set directly. Levels 1-4 because that is what the front
  door does at every level: measured on `/`, its h1 (96/300), h2s (44/330 and
  14/550) and h3s (28/360) are all Faktum. Body copy is untouched — it should
  stay in the body face, which is the whole point of having two.
*/
.sq-shopify [data-page]:not([data-page="enterprise"]) :is(h1, h2, h3, h4) {
    font-family: "Faktum", "Inter-Variable", Helvetica, Arial, sans-serif;
}

/*
  Two rules in the island hard-code the family onto an override class rather
  than going through the token, so the token alone does not reach them. Doubled
  class names take these to (0,4,0)/(0,5,0) — above anything the generated sheet
  emits — and they are listed explicitly so that if the island stops emitting
  them, this file is where you find out what they were for.
*/
.sq-shopify
    [data-page]:not([data-page="enterprise"])
    .override-heading-group-heading-t2.override-heading-group-heading-t2,
.sq-shopify
    [data-page]:not([data-page="enterprise"])
    .override-heading-group-heading-t5.override-heading-group-heading-t5 {
    font-family: "Faktum", "Inter-Variable", Helvetica, Arial, sans-serif;
}

/*
  ONE PAGE SETS ITS HERO AT THE WRONG WEIGHT.

  /free-trial-offer's h1 is a real headline in the right place — it is the only
  one of the eight flagged pages that never had the kicker-as-h1 problem — but
  `.hero-heading` in its generated escape sheet sets `font-weight: 500` at 44px.
  The brand's display type is light: 300 on the homepage hero, 330 on
  /about-us and the content hubs, 330 on every clone page that resolves the
  display token. 500 at that size reads as a different page's headline.

  Doubled class name, (0,4,0). The escape sheet's rule is (0,3,0), but it
  arrives as a Next CSS chunk rather than through the island's <link>, so
  relative source order between the two is not something to rely on — the
  specificity is.
*/
.sq-shopify [data-page="free-trial-offer"] .hero-heading.hero-heading {
    font-weight: 330;
}