/* Advero Solutions brand tokens (Spatial look). Source of truth for the website and every branded page.
   Font: Figtree (Google Fonts)
   <link href="https://fonts.googleapis.com/css2?family=Figtree:wght@300;400;500;600;700;800&display=swap" rel="stylesheet"> */
:root{
  /* Text */
  --ink:#16202e;          /* headlines, body */
  --ink-2:#4d596b;        /* sub text, "Solutions" in the logo */
  --ink-3:#8792a3;        /* captions only at 24px+, never small body text */

  /* Accent */
  --blue:#2f74f5;         /* brand blue: buttons, logo front plane, large text */
  --blue-2:#6aa5ff;       /* light blue: gradients, highlights */
  --blue-deep:#1f5fd6;    /* blue for small text (eyebrows, links); passes 4.5:1 */
  --mint:#1fb487;         /* success, checks, "done" states */
  --amber:#e8a13a;        /* warnings, sparingly */

  /* Surfaces */
  --page:#e9f0f8;
  --line:rgba(150,170,200,.28);
  --sky:
    radial-gradient(1200px 600px at 78% -10%,rgba(255,255,255,.95),rgba(255,255,255,0) 60%),
    radial-gradient(900px 520px at 8% 30%,rgba(206,226,250,.75),rgba(206,226,250,0) 70%),
    linear-gradient(180deg,#c9dcf2 0%,#dce8f5 28%,#ecf1f7 58%,#f3f4f6 82%,#e9edf2 100%);
  --panel:linear-gradient(180deg,rgba(255,255,255,.94),rgba(248,251,255,.80));
  --panel-edge:linear-gradient(135deg,rgba(255,255,255,.95) 0%,rgba(255,255,255,0) 28%,rgba(255,255,255,0) 72%,rgba(200,218,242,.35) 100%);
  --text-gradient:linear-gradient(180deg,#2f74f5,#5b9bff);   /* the blue half of headlines */

  /* Depth */
  --shadow-panel:inset 0 1px 0 #fff,inset 0 0 0 1px rgba(255,255,255,.55),0 40px 70px -30px rgba(38,72,128,.30),0 16px 30px -18px rgba(38,72,128,.22);
  --shadow-pill:inset 0 1px 0 #fff,0 6px 18px -8px rgba(38,72,128,.25);
  --blur-glass:blur(22px) saturate(1.3);

  /* Shape */
  --radius-panel:28px;
  --radius-pill:99px;

  /* Type */
  --font:"Figtree",system-ui,sans-serif;
  --display:600 clamp(44px,6.6vw,96px)/1.02 var(--font);  /* letter-spacing:-.035em */
  --h2:600 clamp(38px,4.8vw,70px)/1.02 var(--font);       /* letter-spacing:-.035em */
  --sub:450 clamp(17px,1.45vw,21px)/1.45 var(--font);     /* color:var(--ink-2) */
  --eyebrow:600 13px/1 var(--font);                        /* caps, letter-spacing:.14em, color:var(--blue-deep) */

  /* Motion */
  --ease:cubic-bezier(.16,1,.3,1);
}