/* ==========================================================================
   Ummah Technologies — ummahtech.ai scroll-world theme
   Locked direction: "Weightless Studio" — cream-dominant, deep-green + gold accents.
   Brand tokens + real brand fonts + scroll-world engine (--sw-*) overrides.
   ========================================================================== */

/* ---- Brand fonts (self-hosted; files in assets/fonts/) ---- */
@font-face { font-family:'Bebas Neue'; font-style:normal; font-weight:400; font-display:swap;
  src:url('fonts/JTUSjIg69CK48gW7PXooxWtrzAbj.woff2') format('woff2'); }
@font-face { font-family:'Inter'; font-style:normal; font-weight:300; font-display:swap;
  src:url('fonts/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIq15j8eUY.woff2') format('woff2'); }
@font-face { font-family:'Inter'; font-style:normal; font-weight:400; font-display:swap;
  src:url('fonts/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIq15j8eUY.woff2') format('woff2'); }
@font-face { font-family:'Inter'; font-style:normal; font-weight:600; font-display:swap;
  src:url('fonts/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIq15j8eUY.woff2') format('woff2'); }
@font-face { font-family:'Inter'; font-style:normal; font-weight:700; font-display:swap;
  src:url('fonts/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIq15j8eUY.woff2') format('woff2'); }
@font-face { font-family:'DM Sans'; font-style:normal; font-weight:400; font-display:swap;
  src:url('fonts/rP2Yp2ywxg089UriI5-g4vlH9VoD8CmcqYu28qmR9A.woff2') format('woff2'); }
@font-face { font-family:'DM Sans'; font-style:normal; font-weight:500; font-display:swap;
  src:url('fonts/rP2Yp2ywxg089UriI5-g4vlH9VoD8CmcqYu28qmR9A.woff2') format('woff2'); }
@font-face { font-family:'DM Sans'; font-style:normal; font-weight:700; font-display:swap;
  src:url('fonts/rP2Yp2ywxg089UriI5-g4vlH9VoD8CmcqYu28qmR9A.woff2') format('woff2'); }

/* ---- Brand tokens (design system) ---- */
:root {
  --deep-green:#2C3E37; --deep-green-deep:#1F2C27;
  --gold:#C9A961; --dark-gold:#9E8345;
  --body-ink:#2A2520; --secondary:#5A6B63; --muted:#8A9B93;
  --cream:#FAF8F3; --cream-soft:#FEFDFB; --mint:#F0F5F2; --mint-deep:#D4E8E3;
  --signal:#B8452E;
  --rule:rgba(44,62,55,0.12); --rule-strong:rgba(44,62,55,0.28);
  --font-display: 'Bebas Neue', 'Bebas Neue Fallback', sans-serif;
  --font-body:'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-label:'DM Sans', 'Inter', sans-serif;
}

/* ---- scroll-world engine theme overrides ----
   The engine reads these off .sw-root (wrapped in @layer sw, so a plain block wins). */
.sw-root {
  --sw-bg: var(--cream);            /* page bg — matches the cream scene backdrop for seamless posters */
  --sw-ink: var(--deep-green);      /* primary headings/text */
  --sw-ink-soft: var(--secondary);  /* secondary copy */
  --sw-accent: var(--gold);         /* primary button + active nav (each section can override via `accent`) */
  --sw-font-display: var(--font-display);
  --sw-font-body: var(--font-body);
}

/* ============================================================
   Engine overrides — UNLAYERED, so they beat the engine's @layer sw.
   (Fixes the real class names the engine emits + Design-review findings.)
   ============================================================ */

/* House type: DM Sans eyebrows (dark-gold, AA), tight uppercase Bebas titles, brand counter */
.sw-root .sw-copy__eyebrow {
  font-family: var(--font-label); font-weight: 700; letter-spacing: 0.22em;
  text-transform: uppercase; color: var(--dark-gold); font-size: 0.74rem;
}
.sw-root .sw-copy__title {
  font-family: var(--font-display); text-transform: none;
  letter-spacing: 0.01em; line-height: 0.92; color: var(--deep-green);
}
.sw-root .sw-copy__num {
  font-family: var(--font-label); font-weight: 500; letter-spacing: 0.18em; color: var(--muted);
}

@font-face { font-family: "Bebas Neue Fallback"; src: local("Arial");
  ascent-override: 117.32%; descent-override: 39.11%; line-gap-override: 0.00%; size-adjust: 76.72%; }

/* Contrast fixes (WCAG AA) */
.sw-root .sw-nav__item.is-active { background: var(--deep-green); color: var(--cream); }
.sw-root .sw-copy__tags li {
  color: var(--deep-green); font-weight: 600;
  background: color-mix(in srgb, var(--gold) 16%, var(--cream-soft));
  border: 1px solid color-mix(in srgb, var(--gold) 42%, transparent);
}
/* Copy always sits on a full-strength cream scrim across its column width */
.sw-root .sw-copylayer::before {
  width: min(64vw, 880px);
  background: linear-gradient(90deg, var(--cream) 0%, var(--cream) 32%,
    color-mix(in srgb, var(--cream) 80%, transparent) 56%, transparent 100%);
}

/* Visible keyboard focus (engine defined hover only) */
.sw-root .sw-nav__item:focus-visible, .sw-root .sw-btn:focus-visible,
.sw-root .sw-topcta:focus-visible, .sw-root .sw-route__dot:focus-visible,
.sw-root .sw-brand:focus-visible {
  outline: 3px solid var(--deep-green); outline-offset: 2px;
}

/* Sharp-edge house identity: square the chrome */
.sw-root .sw-nav, .sw-root .sw-nav__item, .sw-root .sw-topcta,
.sw-root .sw-btn, .sw-root .sw-copy__tags li, .sw-root .sw-route__label { border-radius: 0; }

/* Warm the glass panels to cream (not cold #fff) */
.sw-root .sw-nav { background: color-mix(in srgb, var(--cream-soft) 62%, transparent); }
.sw-root .sw-route__label { background: color-mix(in srgb, var(--cream-soft) 90%, transparent); }

/* Mobile: keep the current scene's name visible (top nav is hidden on phones) */
@media (max-width: 860px) {
  .sw-root .sw-route__dot.is-active .sw-route__label {
    display: block; opacity: 1; transform: translateY(-50%) translateX(0);
  }
}

/* Desktop: anchor copy higher so rich copy (tags + CTA) fits laptop heights.
   The engine anchors at top:50% (assumes short copy); richer copy overflowed the fold. */
@media (min-width: 861px) {
  .sw-root .sw-copy { top: 15%; }
}