/* ==========================================================================
   ProfessNow storefront — ground theme

   Takes the white out of the page. Loaded on every storefront page, after the
   shared professnow/ui-chrome stylesheets, so it re-declares a handful of
   design tokens rather than chasing individual rules: everything already
   reading --pn-gray-50 / --pn-surface-muted / --pn-border follows along for
   free.

   Scoped to professnow-new ON PURPOSE. The tokens themselves live in the
   shared package and are used by professional-new, admin-new and the rest —
   editing them there would retheme five other portals and need a
   vendor:publish. If this ground is wanted platform-wide, promote these
   values into ui-chrome/resources/assets/css/tokens.css.

   What is deliberately NOT retinted:
     --pn-white    is text-on-dark, button labels and card fill. Tinting it
                   would tint white type on the dark footer and CTAs.
     --pn-surface  stays #FFFFFF so cards read as lifted off the ground —
                   that contrast is what replaces the flat white expanse.
   ========================================================================== */

:root {
  /* The ground itself. Warm, low-chroma, and the same family as the canvas
     band already used by the homepage place sections and /cities. */
  --pn-ground: #F5F2EC;
  --pn-ground-soft: #FAF8F4;
  --pn-ground-deep: #EFEAE1;

  /* Near-white greys become warm tints. These were #FAFAFA / #F5F5F5 / #EFEFEF
     — all effectively white, which is where most of the page's flatness came
     from. */
  --pn-gray-50: #FAF8F4;
  --pn-gray-100: #F1EDE5;
  --pn-gray-150: #EBE6DC;
  --pn-gray-200: #E3DDD1;

  --pn-surface-sunken: #FAF8F4;
  --pn-surface-muted: #F1EDE5;

  /* Cold grey borders read as dirty against a warm ground. */
  --pn-border: #E4DED2;
  --pn-border-strong: #D5CDBC;

  /* A little more lift, since cards now sit on a tint rather than on white. */
  --pn-shadow-card: 0 2px 8px rgba(76, 62, 40, .07), 0 1px 2px rgba(76, 62, 40, .05);
  --pn-shadow-hover: 0 14px 30px rgba(76, 62, 40, .13), 0 4px 10px rgba(76, 62, 40, .07);
}


/* NOTE ON SPECIFICITY
   This sheet loads before @stack('styles') so page stylesheets can still win
   where they should. But a few page rules set the very whiteness this theme
   exists to remove — hero.css:9 is `.pn-hero { background: var(--pn-white) }`
   and loads later. Those specific rules are qualified with `body` (0,0,1,1) so
   the theme beats a bare class without resorting to !important. */

/* --------------------------------------------------------------------------
   The page
   -------------------------------------------------------------------------- */
body {
  background-color: var(--pn-ground);
  /* Two very wide, very weak washes so the ground has some depth instead of
     being one flat fill. No attachment: fixed — it costs scroll performance on
     phones for an effect nobody notices. */
  background-image:
    radial-gradient(1200px 820px at 88% -6%, rgba(22, 163, 74, .055), transparent 62%),
    radial-gradient(1000px 760px at -8% 26%, rgba(168, 116, 44, .045), transparent 60%);
  background-repeat: no-repeat;
}

/* Sections that were transparent now show the ground; these two set white on
   the whole page container and would otherwise stay stubbornly white. */
body .pn-directory-page,
body .pn-profile { background: transparent; }

/* --------------------------------------------------------------------------
   Hero

   The character's footage has a flat #F2F2F2 background baked in, and
   .pn-stage__surface matches it. So the hero cannot simply take the warm
   ground — the grey ellipse would sit on sand. Instead it runs warm on the
   copy side and resolves to exactly the video's grey under the character, so
   the stage stays seamless.
   -------------------------------------------------------------------------- */
body .pn-hero {
  background:
    linear-gradient(100deg,
      var(--pn-ground) 0%,
      var(--pn-ground) 38%,
      #F3F2EF 58%,
      var(--pn-stage-bg) 76%);
}

@media (max-width: 1023px) {
  /* Stacked, the character sits under the copy rather than beside it, so the
     horizontal blend has nothing to line up with. */
  body .pn-hero {
    background: linear-gradient(180deg, var(--pn-ground) 0%, var(--pn-ground) 52%, var(--pn-stage-bg) 100%);
  }
}

/* --------------------------------------------------------------------------
   Surfaces that need to keep reading as "raised"
   -------------------------------------------------------------------------- */
.pn-card,
.pn-search,
.pn-service-card,
.pn-side-card,
.pn-profile-book {
  border-color: var(--pn-border);
}

/* The search is the page's primary control; on a tint it needs to sit clearly
   above the ground rather than merge into it. */
body .pn-search__bar {
  box-shadow: 0 10px 30px rgba(76, 62, 40, .10), 0 2px 6px rgba(76, 62, 40, .06);
}

/* Muted bands need to stay distinguishable from the ground now that the ground
   is no longer white. */
body .pn-section--muted { background: var(--pn-ground-soft); }
body .pn-section--sunken { background: var(--pn-ground-deep); }
body .pn-trust-strip { background: var(--pn-ground-soft); }