/* ==========================================================================
   gainwell-theme.css — Gainwell Technologies theme (tokens + components)
   SINGLE SOURCE OF TRUTH for the Gainwell brand in this project.

   Provenance
   ----------
   "verified" values were read from the public CSS custom properties served
   by https://www.gainwelltechnologies.com/ (inspected 23 Oct 2026):
     --color-primary / --color-brand-color-1 ............ #cb1ac6
     --color-secondary / --color-brand-color-2 .......... #55206e
     --color-tertiary / --color-brand-color-3 ........... #1931e3
     --color-quaternary / --color-brand-color-4 ......... #00eeae
     --color-brand-color-5 .............................. #00b1ef
     --color-background-dark-color / brand-color-2-b .... #1c145e
     --color-background-light-color / grey-color-1 ...... #ebedf5
     --color-grey-color-2 ............................... #c9cee4
     --color-body-dark / --color-heading-dark ........... #2b3a44
     --color-pretitle-dark .............................. #53575a
     --color-link-color-dark ............................ #000517
     --color-border-default-color ....................... #e6e6e6
     --linear-gradient-00 / -01, hero + footer gradients (computed styles)
     Buttons: 4px radius, 14px/600 label, #cb1ac6 fill, white text
     Body: 16px / 1.7, headings line-height 1.2, display letter-spacing -1.4px @ 40px
   "derived" values do not exist on gainwelltechnologies.com; they are tints /
   shades of the verified palette, needed for hover, tint and dark-surface
   roles the source sites already had.

   Typography: gainwelltechnologies.com uses Graphik (a commercially
   licensed typeface, Commercial Type). It is NOT redistributed here.
   "Graphik" stays first in the stack so machines with a licence render it;
   everyone else gets Inter (SIL Open Font License, bundled locally in
   fonts/) — the closest freely licensed grotesque.
   ========================================================================== */

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("fonts/inter-latin-wght-normal.woff2") format("woff2-variations"),
       url("fonts/inter-latin-wght-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("fonts/inter-latin-ext-wght-normal.woff2") format("woff2-variations"),
       url("fonts/inter-latin-ext-wght-normal.woff2") format("woff2");
  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  /* ---- Brand palette (verified) ---------------------------------------- */
  --gainwell-magenta:      #CB1AC6;  /* primary — CTAs, links on light, focus */
  --gainwell-purple:       #55206E;  /* secondary */
  --gainwell-blue:         #1931E3;  /* tertiary */
  --gainwell-green:        #00EEAE;  /* quaternary — logo mark, accent on dark */
  --gainwell-cyan:         #00B1EF;  /* brand colour 5 */
  --gainwell-navy:         #1C145E;  /* dark background / header */
  --gainwell-light-bg:     #EBEDF5;  /* light section background */
  --gainwell-grey-2:       #C9CEE4;  /* light grey 2 */
  --gainwell-text:         #2B3A44;  /* body + heading text on light */
  --gainwell-text-muted:   #53575A;  /* pretitle / secondary text */
  --gainwell-link:         #000517;  /* link colour on light (site default) */
  --gainwell-border:       #E6E6E6;  /* default border */
  --gainwell-white:        #FFFFFF;

  /* ---- Brand gradients (verified) --------------------------------------- */
  --gainwell-gradient-primary: linear-gradient(89.1deg, #CB1AC6 9.25%, #1931E3 93.86%);
  --gainwell-gradient-cool:    linear-gradient(84.21deg, #00EEAE -3.63%, #00B1EF 93.48%);
  --gainwell-gradient-hero:    linear-gradient(22deg, #1C145A 40%, #252DC6 67%);
  --gainwell-gradient-footer:  radial-gradient(71.44% 71.44%, #511E6A 3%, #2F0D45 97%);
  --gainwell-gradient-search:  linear-gradient(0deg, #1C145E, #1931E3);

  /* ---- Derived tints / shades (not on gainwelltechnologies.com) --------- */
  --gainwell-magenta-deep:  #A3159F;  /* hover / pressed */
  --gainwell-magenta-tint:  #F8E1F7;  /* light surface tint */
  --gainwell-magenta-soft:  #FBEEFB;
  --gainwell-purple-deep:   #3F1752;
  --gainwell-purple-tint:   #EEE6F2;
  --gainwell-blue-deep:     #1426B5;
  --gainwell-blue-tint:     #E8EBFC;
  --gainwell-green-deep:    #007A59;  /* green text on light surfaces (AA) */
  --gainwell-green-tint:    #E0FCF4;
  --gainwell-cyan-tint:     #E3F6FD;
  --gainwell-navy-deep:     #140E47;  /* darkest page background */
  --gainwell-navy-raised:   #221A6E;  /* raised panel on navy */
  --gainwell-navy-surface:  #2C2380;  /* card on navy */
  --gainwell-navy-line:     #3A3190;  /* hairline on navy */
  --gainwell-grey-90:       #DFE2EE;
  --gainwell-grey-60:       #C9CEE4;  /* = grey-2; light text on navy */
  --gainwell-grey-50:       #9DA3C2;
  --gainwell-grey-30:       #6B6F94;

  /* ---- Typography ------------------------------------------------------- */
  --gainwell-font-family: "Graphik", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --gainwell-font-mono:   ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  --gainwell-font-size-body: 16px;
  --gainwell-line-height-body: 1.7;
  --gainwell-line-height-heading: 1.2;
  --gainwell-weight-display: 300;   /* Graphik Light (100 on site) ≈ Inter 300 */
  --gainwell-weight-heading: 400;
  --gainwell-weight-medium: 500;
  --gainwell-weight-semibold: 600;
  --gainwell-tracking-display: -0.035em;

  /* ---- Shape + elevation ----------------------------------------------- */
  --gainwell-radius-btn:  4px;
  --gainwell-radius-sm:   4px;
  --gainwell-radius-md:   8px;
  --gainwell-radius-lg:   12px;
  --gainwell-shadow-1: 0 7px 34px rgba(0,0,0,.08), 0 11px 34px rgba(0,0,0,.05);
  --gainwell-shadow-2: 0 15px 20px -4px rgba(0,0,0,.12);
  --gainwell-shadow-3: 0 20px 40px 0 rgba(0,0,0,.18);
}

/* ==========================================================================
   Gainwell component layer — linked AFTER styles.css on every page.
   styles.css keeps the original layout system; its palette variables now
   alias the tokens above. This layer only adds the structural parts of the
   Gainwell visual language: navy header with the official white logo,
   4px solid buttons, light-weight Graphik/Inter headings, purple footer.
   ========================================================================== */

body { font-family: var(--gainwell-font-family); color: var(--gainwell-text); }
h1, h2, h3, h4 { color: var(--gainwell-text); letter-spacing: -0.02em; }
h1 { font-weight: var(--gainwell-weight-display); letter-spacing: var(--gainwell-tracking-display); }
h2 { font-weight: var(--gainwell-weight-heading); }
h3, h4 { font-weight: var(--gainwell-weight-medium); }
.lead { color: var(--gainwell-text); }
a { color: var(--gainwell-blue); }

/* ---- Top bar + header (Gainwell headers are always dark) ---------------- */
.topbar { background: var(--gainwell-navy-deep); color: var(--gainwell-grey-60); }
.topbar strong { color: var(--gainwell-green); }
header.site {
  background: rgba(28, 20, 94, .97);
  border-bottom: 1px solid rgba(255, 255, 255, .10);
}
.brand img.gw-logo { height: 34px; width: auto; display: block; flex: none; }
.brand-text { padding-left: 13px; border-left: 1px solid rgba(255, 255, 255, .28); }
.brand-text b { color: var(--gainwell-white); font-weight: var(--gainwell-weight-semibold); letter-spacing: -.01em; }
.brand-text span { color: var(--gainwell-green); font-weight: var(--gainwell-weight-semibold); }

.nav-links a { color: var(--gainwell-grey-60); font-weight: var(--gainwell-weight-medium); border-radius: var(--gainwell-radius-btn); }
.nav-links a:hover { background: rgba(255, 255, 255, .08); color: var(--gainwell-white); }
.nav-links a.active { color: var(--gainwell-white); background: rgba(255, 255, 255, .12); }
.nav-links a.nav-cta,
.nav-links a.nav-cta:hover { background: var(--gainwell-magenta); color: var(--gainwell-white); box-shadow: none; font-weight: var(--gainwell-weight-semibold); }
.nav-links a.nav-cta:hover { background: var(--gainwell-magenta-deep); }
.navtoggle { background: transparent; color: var(--gainwell-white); border-color: rgba(255, 255, 255, .3); border-radius: var(--gainwell-radius-btn); }
@media (max-width: 760px) {
  .nav-links { background: var(--gainwell-navy); border-bottom-color: rgba(255, 255, 255, .10); }
}

/* ---- Buttons: solid, 4px radius, 600 weight (gainwelltechnologies.com) -- */
.btn { border-radius: var(--gainwell-radius-btn); font-weight: var(--gainwell-weight-semibold); }
.btn-primary { background: var(--gainwell-magenta); box-shadow: none; }
.btn-primary:hover { background: var(--gainwell-magenta-deep); box-shadow: var(--gainwell-shadow-2); }
.btn-teal { background: var(--gainwell-blue); box-shadow: none; }
.btn-teal:hover { background: var(--gainwell-blue-deep); box-shadow: var(--gainwell-shadow-2); }
.btn-ghost:hover { border-color: var(--gainwell-magenta); color: var(--gainwell-magenta-deep); }
.btn-white { color: var(--gainwell-magenta-deep); }
.cta-band.cool .btn-white { color: var(--gainwell-blue); }

/* ---- Typography details ---------------------------------------------------- */
.eyebrow { font-weight: 700; letter-spacing: .1em; }
.brand-text b, .plan .price, .stat b { font-weight: var(--gainwell-weight-semibold); }

/* ---- Footer: Gainwell purple radial gradient --------------------------------- */
footer.site { background: var(--gainwell-gradient-footer); color: var(--gainwell-grey-60); }
footer.site a { color: var(--gainwell-grey-60); }
footer.site a:hover { color: var(--gainwell-green); }
.foot-brand .brand-text b { color: var(--gainwell-white); }

/* ---- Focus (keyboard) ------------------------------------------------------ */
a:focus-visible, button:focus-visible, summary:focus-visible { outline: 2px solid var(--gainwell-magenta); outline-offset: 2px; }
header.site a:focus-visible, header.site button:focus-visible, footer.site a:focus-visible, .topbar a:focus-visible { outline-color: var(--gainwell-green); }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--gainwell-magenta); box-shadow: 0 0 0 3px rgba(203, 26, 198, .15); }