/* ==========================================================================
   Site palette

   The site was running three unrelated blues at once: a deep slate strip at
   the top, a bright sky-blue hero (#0ea5e9 at its light end), and a deep
   slate footer. Three blues that do not belong to one another is what makes
   a page look assembled rather than designed - and the hero's was the
   loudest colour on the site, sitting directly under a dark strip.

   One family now, anchored on the blue in the logo (#0c6ba8):

     ink        #0d1b26   the strip at the top and the footer
     deep       #0d2b3e   where the hero starts
     brand      #0c6ba8   buttons, links, the hero's light end
     light      #4fa8dd   accents that have to read on a dark ground
     sunk       #f4f7fa   the alternating section background
     paper      #ffffff

   which gives the page a shape: dark strip, white navigation, deep blue
   hero, white and near-white sections, dark footer.

   This works by redefining the custom properties redesign.css already reads,
   so the retune reaches the hero, the buttons, the card headers and the
   shadows without any of those rules being rewritten - and the restore point
   in storage/backups/ still applies to style.css and redesign.css untouched.

   Must load after redesign.css.
   ========================================================================== */

:root {
    /* ---------------------------------------------------------- the family */
    --w3-ink:        #0d1b26;
    --w3-ink-2:      #14232f;
    --w3-deep:       #0d2b3e;
    --w3-brand:      #0c6ba8;
    --w3-brand-dark: #084c78;
    --w3-brand-lite: #4fa8dd;

    /* -------------------------------------- what redesign.css already reads */
    /* Was linear-gradient(135deg, #0c4a6e, #0ea5e9) - the sky-blue end is
       what made the hero shout. */
    --w3-gradient:      linear-gradient(135deg, var(--w3-deep) 0%, var(--w3-brand) 100%);
    --w3-gradient-soft: linear-gradient(135deg, rgba(13, 43, 62, .94), rgba(12, 107, 168, .94));

    --w3-primary:      var(--w3-brand);
    --w3-primary-dark: var(--w3-brand-dark);
    --w3-accent:       var(--w3-brand-lite);

    --w3-text:       #10212e;
    --w3-text-muted: #55677a;
    --w3-border:     #dbe4ec;
    --w3-bg-soft:    #f4f7fa;
    --w3-white:      #ffffff;

    /* Shadows tinted with the brand hue rather than a neutral grey, so they
       sit in the same family as everything above. */
    --w3-shadow-sm: 0 2px 8px rgba(13, 27, 38, .06);
    --w3-shadow-md: 0 10px 26px rgba(13, 27, 38, .09);
    --w3-shadow-lg: 0 20px 52px rgba(8, 76, 120, .16);
}

/* --------------------------------------------------------------------------
   The hero's own overlay

   Two soft discs are drawn over the gradient. The second was sky blue, which
   put the old loud colour back on top of the calmer gradient underneath.
   -------------------------------------------------------------------------- */

.banner-section::before,
.about-banner::before {
    background:
        radial-gradient(circle at 15% 20%, rgba(255, 255, 255, .14) 0, transparent 38%),
        radial-gradient(circle at 85% 80%, rgba(79, 168, 221, .22) 0, transparent 42%) !important;
}

/* A hairline where the hero meets the page below it, so the transition is a
   decision rather than an edge. */
.banner-section {
    border-bottom: 1px solid rgba(255, 255, 255, .08);
}

/* --------------------------------------------------------------------------
   The two dark bands

   Both read from the same tokens now; they were two hand-written hex values
   in two different files.
   -------------------------------------------------------------------------- */

.header-top { --t-ground: var(--w3-ink-2); --t-accent: var(--w3-brand-lite); }

.site-footer {
    --f-ground: var(--w3-ink);
    --f-raise:  var(--w3-ink-2);
    --f-accent: var(--w3-brand-lite);
}

/* --------------------------------------------------------------------------
   Alternating sections

   White, near-white, white gives the page a rhythm without a third colour.
   -------------------------------------------------------------------------- */

.features-v2,
.channels-section,
.coverage-section {
    background: var(--w3-bg-soft);
}

.how-it-works,
.api-showcase,
.faqs-section {
    background: var(--w3-white);
}