/* ==========================================================================
   THE SOUL PHYSICS DESIGN SYSTEM
   03 — SYSTEM (v1.0 — CANONICAL RELEASE)
   --------------------------------------------------------------------------
   PURPOSE
   This file serves as the Orchestration Layer of the Design System. It resolves
   Site identity, Palette identity and Surface behaviour into the final page 
   context consumed by all components. It operates strictly through native 
   CSS cascade layers with zero intermediate string states.

   CASCADING FLOW
   Phase 1 — Site Presets         → 10 Sites inject defaults & baseline layouts.
   Phase 2 — Palette Overrides     → 17 Explicit color DNA structures (pal-*).
   Phase 3 — Surface Overrides     → 3 Pure geometric background profiles (surf-*).
   Phase 4 — Final Page Binding    → Canvas execution and core rendering hook.
   Phase 5 — Coherent Reading Pairs→ Interface boundary targets for components.
   Phase 6 — Accessibility Locks   → Absolute structural contrast guarantees.
   Global Header Contract           → Inverse ink on every page; pure white on interaction.
   Phase 7 — Local Realm Helpers   → Secondary educational context classification.
   Phase 8 — Layout Hooks          → Boundary protection for framework bounds.

   RULE
   The cascade IS the orchestrator. The gradient is never stretched over the 
   page height. It always resolves into the final surface colour within the 
   first viewport. The remainder of the page continues using the final surface colour.
   ========================================================================== */

:root {
  /* PHASE 0 — TEXTURE ASSET DRY EXTRACTION */
  --bg-noise: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.025'/%3E%3C/svg%3E");
  --bg-noise-muted: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.021'/%3E%3C/svg%3E");

  /* SURFACE GEOMETRY
     ------------------------------------------------------------------------
     Controls how quickly the page reaches its stable reading surface.
     The gradient never stretches over the page height.
     It always finishes within the first viewport. */
  --surface-reading-height: 70vh;
  --surface-landing-height: 85vh;
  --surface-anchor-height:  70vh;

  /* READING GRADIENT STOPS */
  --reading-stop-rich: 0%;
  --reading-stop-main: 5%;
  --reading-stop-bridge: 12%;
  --reading-stop-soft: 28%;
  --reading-stop-air: 100%;

  /* LANDING GRADIENT STOPS */
  --landing-stop-rich: 0%;
  --landing-stop-main: 8%;
  --landing-stop-bridge: 25%;
  --landing-stop-soft: 55%;
  --landing-stop-air: 100%;

  /* ANCHOR GRADIENT STOPS */
  --anchor-stop-deep-start: 0%;
  --anchor-stop-deep-end: 8%;
  --anchor-stop-core: 25%;
  --anchor-stop-threshold: 100%;






/* ==========================================================================
   BRAND GOLD — RENDERING PROFILES
   ========================================================================== */

--brand-gold-gradient-hero:
  linear-gradient(
    180deg,
    var(--brand-gold-highlight) 0%,
    var(--brand-gold-highlight) 24%,
    var(--brand-gold-light) 55%,
    var(--brand-gold) 84%,
    var(--brand-gold-deep) 96%,
    var(--brand-gold-shadow) 100%
  );


--brand-gold-gradient-soft:
  linear-gradient(
    180deg,
    var(--brand-gold-highlight) 0%,
    var(--brand-gold-light) 62%,
    var(--brand-gold) 88%,
    var(--brand-gold-deep) 100%
  );



--brand-gold-gradient-soft-desktop:
  linear-gradient(
    180deg,
    var(--brand-gold-highlight) 0%,
    var(--brand-gold-light) 55%,
    var(--brand-gold) 100%
  );




  



/* ==========================================================================
   BRAND GOLD — DESKTOP HERO PROFILE
   --------------------------------------------------------------------------
   Canonical luminous gold treatment for single-line desktop typography.
   ========================================================================== */

--brand-gold-gradient-hero-desktop:
  linear-gradient(
    180deg,
    var(--brand-gold-highlight) 0%,
    var(--brand-gold-light) 45%,
    var(--brand-gold) 100%
  );












/* ==========================================================================
   SYSTEM FALLBACK
   --------------------------------------------------------------------------
   Safe Utility context for pages without an explicit site-* identity.

   Later site-*, pal-* and surf-* classes override this baseline through
   normal cascade order.
   ========================================================================== */

body {
  --surface-rich: var(--utility-surface-rich);
  --surface-main: var(--utility-surface-main);
  --surface-bridge: var(--utility-surface-bridge);
  --surface-soft: var(--utility-surface-soft);
  --surface-air: var(--utility-surface-air);

  --anchor-deep: var(--utility-anchor-deep);
  --anchor-core: var(--utility-anchor-core);
  --anchor-threshold: var(--utility-anchor-threshold);

  --accent-soft: var(--utility-surface-rich);
  --accent: var(--utility-anchor-core);
  --accent-hover: var(--utility-anchor-deep);

  --page-background:
    var(--bg-noise),
    linear-gradient(
      180deg,
      var(--surface-rich) var(--reading-stop-rich),
      var(--surface-main) var(--reading-stop-main),
      var(--surface-bridge) var(--reading-stop-bridge),
      var(--surface-soft) var(--reading-stop-soft),
      var(--surface-air) var(--reading-stop-air)
    );

  --page-background-color: var(--surface-air);
  --page-background-height: var(--surface-reading-height);
  --page-ink: var(--ink-primary);

  --header-ink: var(--ink-inverse);
  --header-ink-hover: var(--pure-white);

  /* INTERFACE DIVIDERS
     Reading, Landing and Expression surfaces use a darker palette-derived line. */
  --header-divider:
    color-mix(
      in srgb,
      var(--anchor-threshold) 46%,
      transparent
    );

  --footer-divider:
    color-mix(
      in srgb,
      var(--surface-rich) 62%,
      transparent
    );
}


/* ==========================================================================
   PHASE 1 — SITE PRESETS
   --------------------------------------------------------------------------
   Purpose:
   Maps the canonical set of 10 Site Identities. Each block acts as a uniform preset:
   it injects the core palette variables and configures the default layout.
   ========================================================================== */





/* --- 1. HOME (Default: Home Colors + Anchor Night Profile) --- */
body.site-home {
  --surface-rich: var(--home-surface-rich);
  --surface-main: var(--home-surface-main);
  --surface-bridge: var(--home-surface-bridge);
  --surface-soft: var(--home-surface-soft);
  --surface-air: var(--home-surface-air);

  --anchor-deep: var(--home-anchor-deep);
  --anchor-core: var(--home-anchor-core);
  --anchor-threshold: var(--home-anchor-threshold);

  --accent-soft: var(--home-surface-rich);
  --accent: var(--home-anchor-core);
  --accent-hover: var(--home-anchor-deep);
  
  
  --page-background:
    var(--bg-noise-muted),
    linear-gradient(
      180deg,
      var(--anchor-deep) var(--anchor-stop-deep-start),
      var(--anchor-deep) var(--anchor-stop-deep-end),
      var(--anchor-core) var(--anchor-stop-core),
      var(--anchor-threshold) var(--anchor-stop-threshold)
    );

  --page-background-color: var(--anchor-threshold);
  --page-background-height: var(--surface-anchor-height);
  --page-ink: var(--ink-inverse);
}



/* --- 2. PHYSICS WAY (Default: Physics Colors + Reading Gradient) --- */
body.site-physics {
  --surface-rich: var(--physics-surface-rich);
  --surface-main: var(--physics-surface-main);
  --surface-bridge: var(--physics-surface-bridge);
  --surface-soft: var(--physics-surface-soft);
  --surface-air: var(--physics-surface-air);

  --anchor-deep: var(--physics-anchor-deep);
  --anchor-core: var(--physics-anchor-core);
  --anchor-threshold: var(--physics-anchor-threshold);

  --accent-soft: var(--physics-surface-rich);
  --accent: var(--physics-anchor-core);
  --accent-hover: var(--physics-anchor-deep);
  
  --page-background:
    var(--bg-noise),
    linear-gradient(
      180deg,
      var(--surface-rich) var(--reading-stop-rich),
      var(--surface-main) var(--reading-stop-main),
      var(--surface-bridge) var(--reading-stop-bridge),
      var(--surface-soft) var(--reading-stop-soft),
      var(--surface-air) var(--reading-stop-air)
    );
  --page-background-color: var(--surface-air);
  --page-background-height: var(--surface-reading-height);
  --page-ink: var(--ink-primary);
}

/* --- 3. SOUL FREQUENCY (Default: Soul Colors + Reading Gradient) --- */
body.site-soul {
  --surface-rich: var(--soul-surface-rich);
  --surface-main: var(--soul-surface-main);
  --surface-bridge: var(--soul-surface-bridge);
  --surface-soft: var(--soul-surface-soft);
  --surface-air: var(--soul-surface-air);

  --anchor-deep: var(--soul-anchor-deep);
  --anchor-core: var(--soul-anchor-core);
  --anchor-threshold: var(--soul-anchor-threshold);

  --accent-soft: var(--soul-surface-rich);
  --accent: var(--soul-anchor-core);
  --accent-hover: var(--soul-anchor-deep);
  
  --page-background:
    var(--bg-noise),
    linear-gradient(
      180deg,
      var(--surface-rich) var(--reading-stop-rich),
      var(--surface-main) var(--reading-stop-main),
      var(--surface-bridge) var(--reading-stop-bridge),
      var(--surface-soft) var(--reading-stop-soft),
      var(--surface-air) var(--reading-stop-air)
    );
  --page-background-color: var(--surface-air);
  --page-background-height: var(--surface-reading-height);
  --page-ink: var(--ink-primary);
}

/* --- 4. ENERGONAUTICS (Default: Enav Colors + Reading Gradient) --- */
body.site-enav {
  --surface-rich: var(--enav-surface-rich);
  --surface-main: var(--enav-surface-main);
  --surface-bridge: var(--enav-surface-bridge);
  --surface-soft: var(--enav-surface-soft);
  --surface-air: var(--enav-surface-air);

  --anchor-deep: var(--enav-anchor-deep);
  --anchor-core: var(--enav-anchor-core);
  --anchor-threshold: var(--enav-anchor-threshold);

  --accent-soft: var(--enav-surface-rich);
  --accent: var(--enav-anchor-core);
  --accent-hover: var(--enav-anchor-deep);
  
  --page-background:
    var(--bg-noise),
    linear-gradient(
      180deg,
      var(--surface-rich) var(--reading-stop-rich),
      var(--surface-main) var(--reading-stop-main),
      var(--surface-bridge) var(--reading-stop-bridge),
      var(--surface-soft) var(--reading-stop-soft),
      var(--surface-air) var(--reading-stop-air)
    );
  --page-background-color: var(--surface-air);
  --page-background-height: var(--surface-reading-height);
  --page-ink: var(--ink-primary);
}

/* --- 5. PLAY (Default: Play Colors + Reading Gradient) --- */
body.site-play {
  --surface-rich: var(--play-surface-rich);
  --surface-main: var(--play-surface-main);
  --surface-bridge: var(--play-surface-bridge);
  --surface-soft: var(--play-surface-soft);
  --surface-air: var(--play-surface-air);

  --anchor-deep: var(--play-anchor-deep);
  --anchor-core: var(--play-anchor-core);
  --anchor-threshold: var(--play-anchor-threshold);

  --accent-soft: var(--play-surface-rich);
  --accent: var(--play-anchor-core);
  --accent-hover: var(--play-anchor-deep);
  
  --page-background:
    var(--bg-noise),
    linear-gradient(
      180deg,
      var(--surface-rich) var(--reading-stop-rich),
      var(--surface-main) var(--reading-stop-main),
      var(--surface-bridge) var(--reading-stop-bridge),
      var(--surface-soft) var(--reading-stop-soft),
      var(--surface-air) var(--reading-stop-air)
    );
  --page-background-color: var(--surface-air);
  --page-background-height: var(--surface-reading-height);
  --page-ink: var(--ink-primary);
}

/* --- 6-10. UTILITY DOMAINS (Default: Slate Colors + Reading Gradient) --- */
body.site-blog, body.site-events, body.site-grow, body.site-shop, body.site-login {
  --surface-rich: var(--utility-surface-rich);
  --surface-main: var(--utility-surface-main);
  --surface-bridge: var(--utility-surface-bridge);
  --surface-soft: var(--utility-surface-soft);
  --surface-air: var(--utility-surface-air);

  --anchor-deep: var(--utility-anchor-deep);
  --anchor-core: var(--utility-anchor-core);
  --anchor-threshold: var(--utility-anchor-threshold);

  --accent-soft: var(--utility-surface-rich);
  --accent: var(--utility-anchor-core);
  --accent-hover: var(--utility-anchor-deep);
  
  --page-background:
    var(--bg-noise),
    linear-gradient(
      180deg,
      var(--surface-rich) var(--reading-stop-rich),
      var(--surface-main) var(--reading-stop-main),
      var(--surface-bridge) var(--reading-stop-bridge),
      var(--surface-soft) var(--reading-stop-soft),
      var(--surface-air) var(--reading-stop-air)
    );
  --page-background-color: var(--surface-air);
  --page-background-height: var(--surface-reading-height);
  --page-ink: var(--ink-primary);
}


/* ==========================================================================
   PHASE 2 — PALETTE OVERRIDES (The 17 Symmetric Sets)
   --------------------------------------------------------------------------
   Purpose:
   Explicit pal-* classes override active color variables in place, 
   leaving baseline layouts and navigation routing entirely intact.
   ========================================================================== */

/* --- Main Overrides --- */
body.pal-home {
  --surface-rich: var(--home-surface-rich);
  --surface-main: var(--home-surface-main);
  --surface-bridge: var(--home-surface-bridge);
  --surface-soft: var(--home-surface-soft);
  --surface-air: var(--home-surface-air);
  --anchor-deep: var(--home-anchor-deep);
  --anchor-core: var(--home-anchor-core);
  --anchor-threshold: var(--home-anchor-threshold);
  --accent-soft: var(--home-surface-rich);
  --accent: var(--home-anchor-core);
  --accent-hover: var(--home-anchor-deep);
}
body.pal-physics {
  --surface-rich: var(--physics-surface-rich);
  --surface-main: var(--physics-surface-main);
  --surface-bridge: var(--physics-surface-bridge);
  --surface-soft: var(--physics-surface-soft);
  --surface-air: var(--physics-surface-air);
  --anchor-deep: var(--physics-anchor-deep);
  --anchor-core: var(--physics-anchor-core);
  --anchor-threshold: var(--physics-anchor-threshold);
  --accent-soft: var(--physics-surface-rich);
  --accent: var(--physics-anchor-core);
  --accent-hover: var(--physics-anchor-deep);
}
body.pal-soul {
  --surface-rich: var(--soul-surface-rich);
  --surface-main: var(--soul-surface-main);
  --surface-bridge: var(--soul-surface-bridge);
  --surface-soft: var(--soul-surface-soft);
  --surface-air: var(--soul-surface-air);
  --anchor-deep: var(--soul-anchor-deep);
  --anchor-core: var(--soul-anchor-core);
  --anchor-threshold: var(--soul-anchor-threshold);
  --accent-soft: var(--soul-surface-rich);
  --accent: var(--soul-anchor-core);
  --accent-hover: var(--soul-anchor-deep);
}
body.pal-enav {
  --surface-rich: var(--enav-surface-rich);
  --surface-main: var(--enav-surface-main);
  --surface-bridge: var(--enav-surface-bridge);
  --surface-soft: var(--enav-surface-soft);
  --surface-air: var(--enav-surface-air);
  --anchor-deep: var(--enav-anchor-deep);
  --anchor-core: var(--enav-anchor-core);
  --anchor-threshold: var(--enav-anchor-threshold);
  --accent-soft: var(--enav-surface-rich);
  --accent: var(--enav-anchor-core);
  --accent-hover: var(--enav-anchor-deep);
}
body.pal-play {
  --surface-rich: var(--play-surface-rich);
  --surface-main: var(--play-surface-main);
  --surface-bridge: var(--play-surface-bridge);
  --surface-soft: var(--play-surface-soft);
  --surface-air: var(--play-surface-air);
  --anchor-deep: var(--play-anchor-deep);
  --anchor-core: var(--play-anchor-core);
  --anchor-threshold: var(--play-anchor-threshold);
  --accent-soft: var(--play-surface-rich);
  --accent: var(--play-anchor-core);
  --accent-hover: var(--play-anchor-deep);
}
body.pal-utility {
  --surface-rich: var(--utility-surface-rich);
  --surface-main: var(--utility-surface-main);
  --surface-bridge: var(--utility-surface-bridge);
  --surface-soft: var(--utility-surface-soft);
  --surface-air: var(--utility-surface-air);
  --anchor-deep: var(--utility-anchor-deep);
  --anchor-core: var(--utility-anchor-core);
  --anchor-threshold: var(--utility-anchor-threshold);
  --accent-soft: var(--utility-surface-rich);
  --accent: var(--utility-anchor-core);
  --accent-hover: var(--utility-anchor-deep);
}

/* --- Realm Overrides --- */
body.pal-neutral {
  --surface-rich: var(--realm-neutral-surface-rich);
  --surface-main: var(--realm-neutral-surface-main);
  --surface-bridge: var(--realm-neutral-surface-bridge);
  --surface-soft: var(--realm-neutral-surface-soft);
  --surface-air: var(--realm-neutral-surface-air);
  --anchor-deep: var(--realm-neutral-anchor-deep);
  --anchor-core: var(--realm-neutral-anchor-core);
  --anchor-threshold: var(--realm-neutral-anchor-threshold);
  --accent-soft: var(--realm-neutral-surface-rich);
  --accent: var(--realm-neutral-anchor-core);
  --accent-hover: var(--realm-neutral-anchor-deep);
}
body.pal-be {
  --surface-rich: var(--realm-be-surface-rich);
  --surface-main: var(--realm-be-surface-main);
  --surface-bridge: var(--realm-be-surface-bridge);
  --surface-soft: var(--realm-be-surface-soft);
  --surface-air: var(--realm-be-surface-air);
  --anchor-deep: var(--realm-be-anchor-deep);
  --anchor-core: var(--realm-be-anchor-core);
  --anchor-threshold: var(--realm-be-anchor-threshold);
  --accent-soft: var(--realm-be-surface-rich);
  --accent: var(--realm-be-anchor-core);
  --accent-hover: var(--realm-be-anchor-deep);
}
body.pal-feel {
  --surface-rich: var(--realm-feel-surface-rich);
  --surface-main: var(--realm-feel-surface-main);
  --surface-bridge: var(--realm-feel-surface-bridge);
  --surface-soft: var(--realm-feel-surface-soft);
  --surface-air: var(--realm-feel-surface-air);
  --anchor-deep: var(--realm-feel-anchor-deep);
  --anchor-core: var(--realm-feel-anchor-core);
  --anchor-threshold: var(--realm-feel-anchor-threshold);
  --accent-soft: var(--realm-feel-surface-rich);
  --accent: var(--realm-feel-anchor-core);
  --accent-hover: var(--realm-feel-anchor-deep);
}
body.pal-see {
  --surface-rich: var(--realm-see-surface-rich);
  --surface-main: var(--realm-see-surface-main);
  --surface-bridge: var(--realm-see-surface-bridge);
  --surface-soft: var(--realm-see-surface-soft);
  --surface-air: var(--realm-see-surface-air);
  --anchor-deep: var(--realm-see-anchor-deep);
  --anchor-core: var(--realm-see-anchor-core);
  --anchor-threshold: var(--realm-see-anchor-threshold);
  --accent-soft: var(--realm-see-surface-rich);
  --accent: var(--realm-see-anchor-core);
  --accent-hover: var(--realm-see-anchor-deep);
}
body.pal-do {
  --surface-rich: var(--realm-do-surface-rich);
  --surface-main: var(--realm-do-surface-main);
  --surface-bridge: var(--realm-do-surface-bridge);
  --surface-soft: var(--realm-do-surface-soft);
  --surface-air: var(--realm-do-surface-air);
  --anchor-deep: var(--realm-do-anchor-deep);
  --anchor-core: var(--realm-do-anchor-core);
  --anchor-threshold: var(--realm-do-anchor-threshold);
  --accent-soft: var(--realm-do-surface-rich);
  --accent: var(--realm-do-anchor-core);
  --accent-hover: var(--realm-do-anchor-deep);
}

/* --- Expression Overrides --- */
body.pal-peach {
  --surface-rich: var(--expr-peach-surface-rich);
  --surface-main: var(--expr-peach-surface-main);
  --surface-bridge: var(--expr-peach-surface-bridge);
  --surface-soft: var(--expr-peach-surface-soft);
  --surface-air: var(--expr-peach-surface-air);
  --anchor-deep: var(--expr-peach-anchor-deep);
  --anchor-core: var(--expr-peach-anchor-core);
  --anchor-threshold: var(--expr-peach-anchor-threshold);
  --accent-soft: var(--expr-peach-surface-rich);
  --accent: var(--expr-peach-anchor-core);
  --accent-hover: var(--expr-peach-anchor-deep);
}
body.pal-mauve {
  --surface-rich: var(--expr-mauve-surface-rich);
  --surface-main: var(--expr-mauve-surface-main);
  --surface-bridge: var(--expr-mauve-surface-bridge);
  --surface-soft: var(--expr-mauve-surface-soft);
  --surface-air: var(--expr-mauve-surface-air);
  --anchor-deep: var(--expr-mauve-anchor-deep);
  --anchor-core: var(--expr-mauve-anchor-core);
  --anchor-threshold: var(--expr-mauve-anchor-threshold);
  --accent-soft: var(--expr-mauve-surface-rich);
  --accent: var(--expr-mauve-anchor-core);
  --accent-hover: var(--expr-mauve-anchor-deep);
}
body.pal-honey {
  --surface-rich: var(--expr-honey-surface-rich);
  --surface-main: var(--expr-honey-surface-main);
  --surface-bridge: var(--expr-honey-surface-bridge);
  --surface-soft: var(--expr-honey-surface-soft);
  --surface-air: var(--expr-honey-surface-air);
  --anchor-deep: var(--expr-honey-anchor-deep);
  --anchor-core: var(--expr-honey-anchor-core);
  --anchor-threshold: var(--expr-honey-anchor-threshold);
  --accent-soft: var(--expr-honey-surface-rich);
  --accent: var(--expr-honey-anchor-core);
  --accent-hover: var(--expr-honey-anchor-deep);
}
body.pal-periwinkle {
  --surface-rich: var(--expr-periwinkle-surface-rich);
  --surface-main: var(--expr-periwinkle-surface-main);
  --surface-bridge: var(--expr-periwinkle-surface-bridge);
  --surface-soft: var(--expr-periwinkle-surface-soft);
  --surface-air: var(--expr-periwinkle-surface-air);
  --anchor-deep: var(--expr-periwinkle-anchor-deep);
  --anchor-core: var(--expr-periwinkle-anchor-core);
  --anchor-threshold: var(--expr-periwinkle-anchor-threshold);
  --accent-soft: var(--expr-periwinkle-surface-rich);
  --accent: var(--expr-periwinkle-anchor-core);
  --accent-hover: var(--expr-periwinkle-anchor-deep);
}
body.pal-terra {
  --surface-rich: var(--expr-terra-surface-rich);
  --surface-main: var(--expr-terra-surface-main);
  --surface-bridge: var(--expr-terra-surface-bridge);
  --surface-soft: var(--expr-terra-surface-soft);
  --surface-air: var(--expr-terra-surface-air);
  --anchor-deep: var(--expr-terra-anchor-deep);
  --anchor-core: var(--expr-terra-anchor-core);
  --anchor-threshold: var(--expr-terra-anchor-threshold);
  --accent-soft: var(--expr-terra-surface-rich);
  --accent: var(--expr-terra-anchor-core);
  --accent-hover: var(--expr-terra-anchor-deep);
}
body.pal-olive {
  --surface-rich: var(--expr-olive-surface-rich);
  --surface-main: var(--expr-olive-surface-main);
  --surface-bridge: var(--expr-olive-surface-bridge);
  --surface-soft: var(--expr-olive-surface-soft);
  --surface-air: var(--expr-olive-surface-air);
  --anchor-deep: var(--expr-olive-anchor-deep);
  --anchor-core: var(--expr-olive-anchor-core);
  --anchor-threshold: var(--expr-olive-anchor-threshold);
  --accent-soft: var(--expr-olive-surface-rich);
  --accent: var(--expr-olive-anchor-core);
  --accent-hover: var(--expr-olive-anchor-deep);
}


/* ==========================================================================
   PHASE 3 — SURFACE OVERRIDES
   --------------------------------------------------------------------------
   Purpose:
   Explicit surf-* classes override both the --page-background composition
   and the --page-background-height geometry as a complete rendering package.

   SURFACE GEOMETRY DOCUMENTATION
   Surface controls two independent properties:
   1. Gradient progression (how colours transition)
   2. Gradient geometry (over what vertical distance they transition)
   The gradient is never stretched over the page height. It always resolves 
   into the final surface colour within the first viewport. The remainder 
   of the page continues using the final surface colour, creating a predictable 
   visual experience regardless of page length.
   ========================================================================== */

/* --- surf-reading (4% -> 10% -> 28%) --- */
body.surf-reading {
  --page-background:
    var(--bg-noise),
    linear-gradient(
      180deg,
      var(--surface-rich) var(--reading-stop-rich),
      var(--surface-main) var(--reading-stop-main),
      var(--surface-bridge) var(--reading-stop-bridge),
      var(--surface-soft) var(--reading-stop-soft),
      var(--surface-air) var(--reading-stop-air)
    );

  --page-background-color: var(--surface-air);
  --page-background-height: var(--surface-reading-height);

  --page-ink: var(--ink-primary);
}




/* --- surf-landing (8% -> 25% -> 55%) --- */

body.surf-landing {
  --page-background:
    var(--bg-noise),
    linear-gradient(
      180deg,
      var(--surface-rich) var(--landing-stop-rich),
      var(--surface-main) var(--landing-stop-main),
      var(--surface-bridge) var(--landing-stop-bridge),
      var(--surface-soft) var(--landing-stop-soft),
      var(--surface-air) var(--landing-stop-air)
    );

  --page-background-color: var(--surface-air);
  --page-background-height: var(--surface-landing-height);

  --page-ink: var(--ink-primary);
}



/* --- surf-anchor (Dark Immersive Environment) --- */
body.surf-anchor {
  --page-background:
    var(--bg-noise-muted),
    linear-gradient(
      180deg,
      var(--anchor-deep) var(--anchor-stop-deep-start),
      var(--anchor-deep) var(--anchor-stop-deep-end),
      var(--anchor-core) var(--anchor-stop-core),
      var(--anchor-threshold) var(--anchor-stop-threshold)
    );

  --page-background-color: var(--anchor-threshold);
  --page-background-height: var(--surface-anchor-height);

  --page-ink: var(--ink-inverse);
}



/* ==========================================================================
   PHASE 4 — FINAL PAGE BINDING
   --------------------------------------------------------------------------
   Purpose:
   The unique physical execution hook where the resolved preset canvas states
   are permanently applied to the native global layout container.
   ========================================================================== */
body {
  min-height: 100vh;
  background-image: var(--page-background) !important;
  background-color: var(--page-background-color) !important;
  background-repeat: repeat, no-repeat;
  background-position: top left, top left;
  background-size: auto, 100% var(--page-background-height) !important;
  color: var(--page-ink) !important;
}


/* ==========================================================================
   PHASE 5 — CANONICAL INK BOUNDARY & COMPONENT PAIRS
   --------------------------------------------------------------------------
   Canonical contrast rule:

   d-8 → d-6 = Anchor range  → inverse ink
   d-5 → d-1 = Surface range → primary ink

   Inverse ink must never be used on Surface Rich, Main, Bridge, Soft or Air.
   Components consume only the explicit surface/ink pairs defined here.
   ========================================================================== */
body {
  --surface-ink: var(--ink-primary);
  --anchor-ink: var(--ink-inverse);

  /* Surface range — d-5 through d-1 — always primary ink */
  --reading-rich-surface: var(--surface-rich);
  --reading-rich-ink: var(--surface-ink);

  --reading-main-surface: var(--surface-main);
  --reading-main-ink: var(--surface-ink);

  --reading-bridge-surface: var(--surface-bridge);
  --reading-bridge-ink: var(--surface-ink);

  --reading-soft-surface: var(--surface-soft);
  --reading-soft-ink: var(--surface-ink);

  --reading-air-surface: var(--surface-air);
  --reading-air-ink: var(--surface-ink);

  /* Anchor range — d-8 through d-6 — always inverse ink */
  --anchor-deep-surface: var(--anchor-deep);
  --anchor-deep-ink: var(--anchor-ink);

  --anchor-core-surface: var(--anchor-core);
  --anchor-core-ink: var(--anchor-ink);

  --anchor-threshold-surface: var(--anchor-threshold);
  --anchor-threshold-ink: var(--anchor-ink);

  /* Functional roles */
  --interactive-surface: var(--anchor-core-surface);
  --interactive-ink: var(--anchor-core-ink);

  --threshold-surface: var(--anchor-threshold-surface);
  --threshold-ink: var(--anchor-threshold-ink);

  --divider: var(--surface-soft);
}


/* ==========================================================================
   PHASE 6 — ACCESSIBILITY LOCKS
   --------------------------------------------------------------------------
   Purpose:
   Enforces context-proof text readability and contrast constraints across 
   any natively resolved or overridden deep midnight anchor container.
   ========================================================================== */
body.site-home,
body.surf-anchor {
  color: var(--ink-inverse);
  --page-ink: var(--ink-inverse);

  /* Light divider treatment on dark immersive surfaces */
  --header-divider:
    color-mix(
      in srgb,
      var(--surface-soft) 34%,
      transparent
    );

  --footer-divider:
    color-mix(
      in srgb,
      var(--surface-soft) 34%,
      transparent
    );
}


/* ==========================================================================
   PHASE 7 — LOCAL REALM HELPERS
   --------------------------------------------------------------------------
   Purpose:
   Secondary editorial context classification maps. Applied locally inside 
   sub-layout blocks to target badges, diagrams, and cards.
   ========================================================================== */
.realm-neutral {
  --realm-rich: var(--realm-neutral-surface-rich);
  --realm-main: var(--realm-neutral-surface-main);
  --realm-bridge: var(--realm-neutral-surface-bridge);
  --realm-soft: var(--realm-neutral-surface-soft);
  --realm-air: var(--realm-neutral-surface-air);
}
.realm-be {
  --realm-rich: var(--realm-be-surface-rich);
  --realm-main: var(--realm-be-surface-main);
  --realm-bridge: var(--realm-be-surface-bridge);
  --realm-soft: var(--realm-be-surface-soft);
  --realm-air: var(--realm-be-surface-air);
}
.realm-feel {
  --realm-rich: var(--realm-feel-surface-rich);
  --realm-main: var(--realm-feel-surface-main);
  --realm-bridge: var(--realm-feel-surface-bridge);
  --realm-soft: var(--realm-feel-surface-soft);
  --realm-air: var(--realm-feel-surface-air);
}
.realm-see {
  --realm-rich: var(--realm-see-surface-rich);
  --realm-main: var(--realm-see-surface-main);
  --realm-bridge: var(--realm-see-surface-bridge);
  --realm-soft: var(--realm-see-surface-soft);
  --realm-air: var(--realm-see-surface-air);
}
.realm-do {
  --realm-rich: var(--realm-do-surface-rich);
  --realm-main: var(--realm-do-surface-main);
  --realm-bridge: var(--realm-do-surface-bridge);
  --realm-soft: var(--realm-do-surface-soft);
  --realm-air: var(--realm-do-surface-air);
}


/* ==========================================================================
   PHASE 8 — LAYOUT FURNITURE HOOKS
   ========================================================================== */
html, body {
  min-height: 100%;
}

.site-main.container { background: transparent; position: relative; z-index: 2; }
.page { min-height: 100vh; }
main { width: 100%; }
.section { padding-block: var(--s-5); }
.section:first-child { padding-top: 0; }
.section-header { text-align: center; margin-bottom: var(--s-4); }
.section-title { margin-bottom: var(--s-3); }
.section-intro { max-width: 70ch; margin-inline: auto; }