/* =========================================================================
   Design tokens.

   Four tone depths re-point the same three custom properties rather than
   restyling components. A card does not know whether it sits on white or on
   deep navy; it reads --fg, --hairline and --signal and is correct either way.
   These names match the Global Colors registered in Elementor, so the panel
   and the stylesheet stay in agreement.
   ========================================================================= */
:root{
  --ink:#060a10;
  --deep:#0d1b26;
  --mid:#12222f;
  --pale:#e8f0f7;
  --white:#ffffff;

  --signal:#45aeee;
  --signal-deep:#0d5b8a;
  --brand:#007cc1;

  --ease:cubic-bezier(.16,1,.3,1);
  --shell:min(1360px, 100% - 2 * clamp(20px, 5vw, 72px));
}

.sh-tone-deep{  --bg:var(--deep);  --fg:#e8eef6; --hairline:rgba(232,238,246,.14); --muted:rgba(232,238,246,.68); }
.sh-tone-mid{   --bg:var(--mid);   --fg:#e8eef6; --hairline:rgba(232,238,246,.12); --muted:rgba(232,238,246,.66); }
.sh-tone-pale{  --bg:var(--pale);  --fg:#0d1b26; --hairline:rgba(13,27,38,.14);    --muted:rgba(13,27,38,.66); }
.sh-tone-white{ --bg:var(--white); --fg:#0d1b26; --hairline:rgba(13,27,38,.12);    --muted:rgba(13,27,38,.64); }

.sh-tone-deep, .sh-tone-mid, .sh-tone-pale, .sh-tone-white{
  background:var(--bg); color:var(--fg);
}

body{ font-family:Ploni, system-ui, sans-serif; }

/* A dark card dropped into a light band has to re-declare its own tokens,
   or it inherits the band's foreground and disappears. */
.sh-tone-white .sh-on-dark, .sh-tone-pale .sh-on-dark{
  --fg:#e8eef6; --signal:#45aeee; --hairline:rgba(232,238,246,.14);
  color:var(--fg);
}