/* =============================================================================
   WealthVector — shared brand layer  (direction-agnostic)
   Tokens, fonts, reset, wordmark + vector mark, regulatory line.
   Source of truth: wealthvector_gc/Brand/brand-book.md + tokens.css.
   Every design direction links this first, then layers its own theme.css.
   ============================================================================= */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Newsreader:opsz,wght@6..72,400;6..72,500;6..72,600&family=JetBrains+Mono:wght@400;500&display=swap');

:root{
  /* Brand accent — the signature green does the visual work */
  --wv-green:#029E60; --wv-green-deep:#017A4B;
  --wv-green-soft:rgba(2,158,96,.09); --wv-green-border:#A6E0C4;

  /* Primary neutrals */
  --wv-ink:#303030; --wv-graphite:#5C5C5C; --wv-grey:#D8D8D8; --wv-cloud:#E3E7EE;

  /* Surfaces */
  --wv-white:#ffffff; --wv-bg:#ffffff; --wv-bg-soft:#F6F8F9; --wv-bg-dark:#303030;
  --wv-border:#E6E6E6; --wv-line:#ECECEC;

  /* Secondary accents — data-viz / status only, never a second brand colour */
  --wv-blue:#A5B7F2; --wv-red:#963F44;

  /* Type — Neue Haas Grotesk is the brand face; Inter is the sanctioned web sub */
  --wv-display:'Neue Haas Grotesk Display Pro','Inter','Helvetica Neue',Arial,sans-serif;
  --wv-sans:'Inter','Helvetica Neue',Arial,sans-serif;
  --wv-serif:'Newsreader',Georgia,'Times New Roman',serif;
  --wv-mono:'JetBrains Mono',ui-monospace,monospace;
}

*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;}
body{margin:0;font-family:var(--wv-sans);color:var(--wv-ink);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;}
img,svg{display:block;max-width:100%;}
a{color:inherit;text-decoration:none;}
button{font-family:inherit;}

/* -----------------------------------------------------------------------------
   Wordmark — `wealthvector`  (one lowercase word, two-tone)
   <span class="wv-wordmark"><span class="w">wealth</span><span class="v">vector</span></span>
   --------------------------------------------------------------------------- */
.wv-wordmark{font-family:var(--wv-display);font-weight:600;letter-spacing:-.02em;line-height:1;white-space:nowrap;display:inline-block;}
.wv-wordmark .w{color:var(--wv-ink);}
.wv-wordmark .v{color:var(--wv-green);}
.wv-wordmark.on-dark .w{color:#fff;}
.wv-wordmark.on-dark .v{color:var(--wv-green);}
.wv-wordmark.on-green .w{color:#fff;}
.wv-wordmark.on-green .v{color:var(--wv-ink);}

/* -----------------------------------------------------------------------------
   Vector mark — the two-tone "W". Inline SVG so fills theme per surface.
   <svg class="wv-mark"> ... two paths: .m-base + .m-tick ... </svg>
   --------------------------------------------------------------------------- */
.wv-mark .m-base{fill:var(--wv-ink);}
.wv-mark .m-tick{fill:var(--wv-green);}
.wv-mark.on-dark .m-base{fill:var(--wv-cloud);}
.wv-mark.on-dark .m-tick{fill:var(--wv-green);}
.wv-mark.on-green .m-base{fill:#fff;}
.wv-mark.on-green .m-tick{fill:var(--wv-ink);}

/* Regulatory line — required on external comms. Status: AUTHORISED (set by Ed,
   pre-launch; the site goes live only once FCA authorisation is in force). */
.wv-regulatory{font-family:var(--wv-sans);font-size:12px;line-height:1.6;color:var(--wv-graphite);}

/* reduced motion */
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important;scroll-behavior:auto !important;}
}