/* webal.net brand layer: the child theme's user.css (Cassiopeia - Webal Layouts), written by site-kit/spec-lib.mjs apply().
   COLOUR AND DECORATION ONLY (owner's rule): colours, a soft page ground, no layout, no structure, no focus changes. Every pair keeps its contrast
   (checked with axe on the built pages). Each block names what in the drawing it stands for: [DRAWING: ...]. */

/* [DRAWING: brand colours] the colour wheel of the Webal Blocks logo, for Cassiopeia's own parts (its buttons, links and focus) */
:root {
  --cassiopeia-color-primary: #224c9b;
  --cassiopeia-color-link: #2757b0;
  --cassiopeia-color-hover: #3c3aa6;
  --wn-tint: rgba(34, 76, 155, .06);
  --wn-indigo: #3c3aa6;
  --wn-on-indigo: #ffffff;
  --wn-blob-pink: rgba(255, 190, 222, .30);
  --wn-blob-blue: rgba(170, 198, 255, .32);
  --wn-blob-green: rgba(176, 236, 208, .28);
}
:root[data-wbl-theme="dark"] {
  --wn-tint: rgba(143, 169, 255, .07);
  --wn-indigo: #b8b4f7;
  --wn-on-indigo: #11141f;
  --wn-blob-pink: rgba(255, 120, 190, .07);
  --wn-blob-blue: rgba(110, 150, 255, .10);
  --wn-blob-green: rgba(90, 210, 160, .06);
}

/* [DRAWING: page ground] near-white pink, blue and green blobs, barely visible, behind the whole page */
body {
  background-image:
    radial-gradient(48rem 38rem at 6% 4%, var(--wn-blob-pink), transparent 70%),
    radial-gradient(52rem 42rem at 95% 14%, var(--wn-blob-blue), transparent 70%),
    radial-gradient(46rem 38rem at 10% 34%, var(--wn-blob-green), transparent 70%),
    radial-gradient(54rem 42rem at 92% 48%, var(--wn-blob-pink), transparent 70%),
    radial-gradient(48rem 40rem at 6% 66%, var(--wn-blob-blue), transparent 70%),
    radial-gradient(52rem 40rem at 94% 82%, var(--wn-blob-green), transparent 70%);
  background-repeat: no-repeat;
}

/* [DRAWING: tint bands] the pale blue of the drawing's tint bands. Home layout: Sections with Width "Page width" and Background "Faint" (the standard class
   bg-body-tertiary, used nowhere else on this site): the colour reaches both screen edges, the modules keep the page width. !important because the standard
   class's own rule has it; --wn-tint has a light and a dark value, so the band follows the colour mode. */
.bg-body-tertiary { background-color: var(--wn-tint) !important; }
/* Pages layout: its tint Row (band-tint) sits in the Component's main column beside the sidebars, where a Row has no Width setting, so it keeps the typed
   class wn-tint and its colour stops at the page width. */
.wn-tint { background-color: var(--wn-tint); }

/* [DRAWING: icon in a circle] the feature icons sit in a brand-blue circle with a white icon */
.wbl-features.wbl-features--circle .wbl-features__icon.wbl-features__icon { background-color: var(--wbl-accent); border-color: var(--wbl-accent); color: var(--wbl-on-accent); }

/* [DRAWING: quieter actions in indigo] outline buttons, card labels and card links on the page ground (bands with their own colour keep Webal's roles) */
.btn.btn-outline-primary:not(:where(.wbl-bg--on-dark, .wbl-bg--on-accent, .wbl-navbar) *) { color: var(--wn-indigo); border-color: var(--wn-indigo); }
.btn.btn-outline-primary:not(:where(.wbl-bg--on-dark, .wbl-bg--on-accent, .wbl-navbar) *):hover { background-color: var(--wn-indigo); color: var(--wn-on-indigo); }
.wbl-card:not(.wbl-pricing__plan--featured) .wbl-card__badge { color: var(--wn-indigo); }
.wbl-card__more-link { color: var(--wn-indigo); }
.wbl-bg--on-dark .wbl-card__more-link, .wbl-bg--on-accent .wbl-card__more-link { color: inherit; }