/* =================================================================
   CUMI — typography/spacing PREVIEW layer
   Added 16 Sep 2026 in response to the client's "FEEDBACK 8Sept26
   Fonts and styling" document (a proposed type/spacing system modelled
   on plusoneamsterdam.com's art-directed hierarchy).

   WHAT THIS FILE DOES: it does nothing at all until an element on the
   page carries data-typo="new". When that attribute is present (set by
   the "Current / New styling" switch in the bottom corner of every
   staging page — see inc/footer.php), it overrides the same CSS custom
   properties style.css already uses everywhere (--step-*, --space-*,
   --ls-*, --lh-*, --container-*), so the whole site re-renders with the
   proposed system, live, on the real pages — no separate copies of any
   page needed. Switching back to "Current" removes the attribute and
   every page instantly reverts, pixel for pixel, to today's site.
   The choice is remembered (localStorage) as you move between pages,
   so it applies sitewide and consistently, not one page at a time.

   STAGING ONLY: this file, the switch, and the inline "read the saved
   choice" script are only ever linked/rendered when
   !is_production_host() is true (see inc/head.php + inc/footer.php).
   The live cumi.co.uk site never loads this file and never shows the
   switch — there is nothing to remember to strip out before launch on
   the "keep it as it is" outcome.

   TO ROLL BACK ENTIRELY (if the client decides against the new
   system): delete this file and remove the two small gated blocks in
   inc/head.php and inc/footer.php that reference it. style.css itself
   was never changed in a way that alters how it looks today — every
   value it now reads through a var(--token, ORIGINAL-VALUE) fallback,
   so with this file gone those tokens are simply undefined again and
   every declaration quietly uses its original literal value.

   TO ADOPT THE NEW SYSTEM PERMANENTLY (if the client prefers it):
   copy the values below straight into style.css's own :root block in
   place of the current --step-*, --space-*, --container-* values, then
   this file and the switch can be deleted the same way.
   ================================================================= */

html[data-typo="new"] {
  /* ---- Type scale (desktop min -> max via clamp, same mechanism the
     site already uses) — retuned to the feedback doc's §2/§9/§10 desktop
     and tablet targets. ---- */
  --step-display: clamp(4.75rem, 3.75rem + 6vw, 7rem);      /* Hero H1: ~76px -> 112px */
  --step-h1:      clamp(3.5rem, 3rem + 2.4vw, 4.875rem);    /* Standard page H1: ~56px -> 78px */
  --step-h2:      clamp(2.375rem, 2rem + 1.8vw, 3rem);      /* Section H2: ~38px -> 48px */
  --step-lead:    clamp(1.1875rem, 1rem + 1.2vw, 2rem);     /* Project intro / lead copy: ~19px -> 32px */
  --step-body:    clamp(1rem, 0.95rem + 0.25vw, 1.1875rem); /* Standard body copy: 16px -> 19px */
  --step-small:   clamp(0.875rem, 0.86rem + 0.1vw, 0.9375rem); /* Nav / buttons / metadata: 14px -> 15px */

  /* ---- Letter-spacing (feedback §14) ---- */
  --ls-display: -0.03em;  /* large display type */
  --ls-heading: -0.02em;  /* medium headings */
  --ls-lead:    -0.015em; /* lead / intro copy */
  --ls-label:   0.06em;   /* small uppercase nav/eyebrow/meta labels — was 0.08/0.1/0.12em in different spots, unified to one value per feedback §17 ("no ad hoc sizes") */

  /* ---- Line-height (feedback §13) ---- */
  --lh-display: 0.94; /* large display typography */
  --lh-heading: 1.1;  /* medium editorial headings */
  --lh-lead:    1.3;  /* lead paragraphs */
  --lh-body:    1.6;  /* body copy */

  /* ---- Spacing scale — feedback §8 flags major-section spacing as
     "extremely important" and explicitly too tight today; --space-5
     (used for section-to-section gaps) is the one most visibly bumped,
     desktop max raised from 128px to 180px. ---- */
  --space-5: clamp(5rem, 3.5rem + 7vw, 11.25rem); /* major section spacing: ~80px -> 180px */

  /* ---- Content width system (feedback §9) — a touch more breathing
     room on the main container and its side padding, so full-bleed
     imagery reads more dominant against text. ---- */
  --container-max: 96rem;                          /* 1536px, was 1440px */
  --container-pad: clamp(1.25rem, 1rem + 2.5vw, 4rem); /* up to 64px, was 48px */
}

/* -----------------------------------------------------------------
   "Current / New styling" switch — staging review aid only.
   ----------------------------------------------------------------- */
.cumi-typo-toggle {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 9999;
  display: flex;
  gap: 2px;
  padding: 4px;
  background: rgba(10, 10, 10, 0.85);
  border-radius: 999px;
  backdrop-filter: blur(6px);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

.cumi-typo-toggle__btn {
  appearance: none;
  border: 0;
  border-radius: 999px;
  padding: 8px 14px;
  font-size: 13px;
  line-height: 1;
  font-weight: 500;
  letter-spacing: 0;
  color: rgba(255, 255, 255, 0.65);
  background: transparent;
  cursor: pointer;
  white-space: nowrap;
}

.cumi-typo-toggle__btn[aria-pressed="true"] {
  background: #ffffff;
  color: #0a0a0a;
}

.cumi-typo-toggle__btn:focus-visible {
  outline: 2px solid #ffffff;
  outline-offset: 2px;
}

@media (max-width: 26rem) {
  .cumi-typo-toggle {
    right: 8px;
    bottom: 8px;
  }
  .cumi-typo-toggle__btn {
    padding: 7px 10px;
    font-size: 12px;
  }
}