/* =====================================================================
   EVERWELL LOOK: the one file that sets how every Everwell screen looks.
   Quiz, intake, card step, order page, sign-in, portal, and the Everwell
   admin pages all read these tokens. Nothing else holds a color or font.

   To restyle: change a value here, OR paste overrides in
   WordPress > Appearance > Everwell look (safer: survives plugin updates).
   Example override:   :root{ --ew-em:#1E4D8C; --ew-round:8px; }

   Soft colors (hover, focus ring, light fills, lines) are mixed from the
   main colors, so changing --ew-em or --ew-ink updates them automatically.
   To pin one yourself, set it by name: --ew-line, --ew-rule, --ew-field-line,
   --ew-mark-line, --ew-hover, --ew-em-line, --ew-focus, --ew-pick, --ew-glow,
   --ew-err-bg, --ew-shadow.
   ===================================================================== */
:root{
  /* Brand colors */
  --ew-ink:#0F1E17;        /* main text */
  --ew-mut:#5B6B62;        /* secondary text */
  --ew-em:#2C5241;         /* main buttons, checks, links */
  --ew-em-deep:#1F3D2F;    /* button hover */
  --ew-on-em:#FFFFFF;      /* text on buttons and dark chips */
  --ew-night:#191B19;      /* price chip, dark bands */
  --ew-mint:#8FD8BE;       /* accents, progress */
  --ew-err:#A32D2D;        /* errors */

  /* Surfaces */
  --ew-screen:#F8FAF8;     /* page behind the cards */
  --ew-card:#FFFFFF;       /* cards and inputs */
  /* Page behind the patient flow and the portal (v0.24.0: one look everywhere). Pin it by name with --ew-page. */

  /* Type. New fonts also need their Google Fonts link in Appearance > Everwell look. */
  --ew-head:"Archivo",Arial,sans-serif;
  --ew-sans:"DM Sans",Arial,sans-serif;

  /* Shape and size */
  --ew-pill:999px;         /* buttons and chips; set 10px for square-ish buttons */
  --ew-round:16px;         /* cards and inputs */
  --ew-round-lg:22px;      /* big cards */
  --ew-btn-h:54px;         /* button height */
  --ew-narrow:560px;       /* width of the question column */
  /* v0.40.0, the new look (home page, quiz): */
  --ew-sage:#EDF2EE;       /* soft green behind step dots and "you said" chips */
  --ew-mist:#F4F5F3;       /* answer rows and fields */
  --ew-photo:#DCDFDA;      /* behind a photo while it loads */
}

/* Short names used inside each screen. Scoped so the website theme is never touched. */
.ewi,body.ew-flow,body.ewa-on,.ewc-acct,.ewp-sheet,.ew-admin,.ew-look-preview{
  --ink:var(--ew-ink); --mut:var(--ew-mut); --em:var(--ew-em); --em-deep:var(--ew-em-deep);
  --on-em:var(--ew-on-em); --night:var(--ew-night); --mint:var(--ew-mint); --err:var(--ew-err);
  --page:var(--ew-page,color-mix(in srgb,var(--ew-em) 5%,var(--ew-screen)));
  --img:var(--ew-img,color-mix(in srgb,var(--ew-ink) 8%,var(--ew-card)));
  --tap-shadow-up:var(--ew-tap-shadow-up,0 1px 2px color-mix(in srgb,var(--ew-ink) 8%,transparent),0 14px 28px -10px color-mix(in srgb,var(--ew-em-deep) 18%,transparent));
  --status-shadow:0 16px 30px -14px color-mix(in srgb,var(--ew-night) 45%,transparent);
  --tap-shadow:var(--ew-tap-shadow,0 1px 2px color-mix(in srgb,var(--ew-ink) 7%,transparent),0 10px 24px -8px color-mix(in srgb,var(--ew-em-deep) 14%,transparent));
  --off:var(--ew-screen); --paper:var(--ew-card); --screen:var(--ew-screen); --card:var(--ew-card);
  --chip:var(--ew-night); --line:var(--ew-line,color-mix(in srgb,var(--ew-ink) 10%,transparent)); --rule:var(--ew-rule,color-mix(in srgb,var(--ew-ink) 12%,transparent)); --field-line:var(--ew-field-line,color-mix(in srgb,var(--ew-ink) 16%,transparent));
  --mark-line:var(--ew-mark-line,color-mix(in srgb,var(--ew-ink) 25%,transparent)); --hover:var(--ew-hover,color-mix(in srgb,var(--ew-ink) 5%,transparent)); --em-line:var(--ew-em-line,color-mix(in srgb,var(--ew-em) 40%,transparent));
  --focus:var(--ew-focus,color-mix(in srgb,var(--ew-em) 13%,transparent)); --pick:var(--ew-pick,color-mix(in srgb,var(--ew-mint) 20%,transparent)); --glow:var(--ew-glow,color-mix(in srgb,var(--ew-mint) 30%,transparent)); --err-bg:var(--ew-err-bg,color-mix(in srgb,var(--ew-err) 10%,var(--ew-card)));
  --card-shadow:var(--ew-shadow,0 1px 0 var(--line),0 12px 28px -18px color-mix(in srgb,var(--ew-ink) 35%,transparent)); --head:var(--ew-head); --sans:var(--ew-sans);
  --pill:var(--ew-pill); --round:var(--ew-round); --round-lg:var(--ew-round-lg);
  --btn-h:var(--ew-btn-h); --narrow:var(--ew-narrow);
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px; --s7:48px;
  /* v0.40.0, the new look: forest buttons, soft photo shadows. */
  --forest:var(--ew-em-deep); --pine:color-mix(in srgb,var(--ew-em-deep) 72%,var(--ew-ink));
  --sage:var(--ew-sage); --mist:var(--ew-mist); --photo:var(--ew-photo);
  --lift:var(--ew-lift,0 1px 2px color-mix(in srgb,var(--ew-ink) 6%,transparent),0 18px 40px -18px color-mix(in srgb,var(--ew-ink) 32%,transparent));
  --float:var(--ew-float,0 2px 6px color-mix(in srgb,var(--ew-ink) 8%,transparent),0 30px 70px -24px color-mix(in srgb,var(--ew-ink) 50%,transparent));
}

/* v0.36.13: iPhone Safari draws a dark box over anything tapped unless the page turns it off.
   Off on every Everwell screen; buttons and links get a quick press instead. */
.ewi,.ewi *,body.ew-flow,body.ew-flow *,body.ewa-on,body.ewa-on *,.ewc-acct,.ewc-acct *,.ewp,.ewp *,.ewp-sheet,.ewp-sheet *{-webkit-tap-highlight-color:transparent}
:is(.ewi,body.ew-flow,body.ewa-on,.ewc-acct,.ewp,.ewp-sheet) :is(button,a,label,[role="button"],summary){transition:transform .12s ease,opacity .12s ease}
:is(.ewi,body.ew-flow,body.ewa-on,.ewc-acct,.ewp,.ewp-sheet) :is(button,a,label,[role="button"],summary):active{transform:scale(.98);opacity:.85}

/* v0.41.0: the v6 look (home v6, product v7, quiz v6; approved 5 Nov 2026). Deep forest, mist, white,
   and the soft lines and glows used on the quiz, health questions and card step. Override any of them
   in Appearance > Everwell look like the tokens above. */
:root{
  --ew6-body:#3E4A44;
  --ew6-chiptext:#1F3D2F;
  --ew6-deep-a0:rgba(14,40,30,0);
  --ew6-deep-a15:rgba(14,40,30,.15);
  --ew6-deep-a2:rgba(14,40,30,.2);
  --ew6-deep-a35:rgba(14,40,30,.35);
  --ew6-deep-a78:rgba(14,40,30,.78);
  --ew6-deep-a86:rgba(14,40,30,.86);
  --ew6-deep-a93:rgba(14,40,30,.93);
  --ew6-em-a0:rgba(44,82,65,0);
  --ew6-fine:#8A968F;
  --ew6-forest:#13261D;
  --ew6-forest-a1:rgba(19,38,29,.1);
  --ew6-forest-a10:rgba(19,38,29,.10);
  --ew6-forest-a12:rgba(19,38,29,.12);
  --ew6-forest-a6:rgba(19,38,29,.6);
  --ew6-glow-a0:rgba(30,90,66,0);
  --ew6-ink:#0F1E17;
  --ew6-ink-a04:rgba(15,30,23,.04);
  --ew6-ink-a10:rgba(15,30,23,.10);
  --ew6-ink-a14:rgba(15,30,23,.14);
  --ew6-ink-a22:rgba(15,30,23,.22);
  --ew6-ink-a25:rgba(15,30,23,.25);
  --ew6-ink-a35:rgba(15,30,23,.35);
  --ew6-ink-a5:rgba(15,30,23,.5);
  --ew6-ink-a6:rgba(15,30,23,.6);
  --ew6-k-a25:rgba(0,0,0,.25);
  --ew6-k-a35:rgba(0,0,0,.35);
  --ew6-k-a6:rgba(0,0,0,.6);
  --ew6-mist:#F2F2EF;
  --ew6-photo-bg:#E9ECE8;
  --ew6-pine:#0B1A13;
  --ew6-stay:#8E9A94;
  --ew6-tint:#F7F8F6;
  --ew6-track:#E7EAE6;
  --ew6-w-a08:rgba(255,255,255,.08);
  --ew6-w-a1:rgba(255,255,255,.1);
  --ew6-w-a12:rgba(255,255,255,.12);
  --ew6-w-a14:rgba(255,255,255,.14);
  --ew6-w-a16:rgba(255,255,255,.16);
  --ew6-w-a18:rgba(255,255,255,.18);
  --ew6-w-a25:rgba(255,255,255,.25);
  --ew6-w-a3:rgba(255,255,255,.3);
  --ew6-w-a45:rgba(255,255,255,.45);
  --ew6-w-a5:rgba(255,255,255,.5);
  --ew6-w-a6:rgba(255,255,255,.6);
  --ew6-w-a62:rgba(255,255,255,.62);
  --ew6-w-a65:rgba(255,255,255,.65);
  --ew6-w-a7:rgba(255,255,255,.7);
  --ew6-w-a72:rgba(255,255,255,.72);
  --ew6-w-a75:rgba(255,255,255,.75);
  --ew6-w-a8:rgba(255,255,255,.8);
  --ew6-w-a82:rgba(255,255,255,.82);
  --ew6-w-a85:rgba(255,255,255,.85);
  --ew6-w-a86:rgba(255,255,255,.86);
  --ew6-w-a9:rgba(255,255,255,.9);
  --ew6-w-a95:rgba(255,255,255,.95);
  --ew6-white:#FFFFFF;
  --ew6-white-hover:#EEF1EE;
  --ew6-x0a2b20:#0A2B20;
  --ew6-x0e281e:#0E281E;
  --ew6-x0e3326:#0E3326;
  --ew6-x1e5a42:#1E5A42;
  --ew6-x1f4334:#1F4334;
  --ew6-x2c5241:#2C5241;
  --ew6-x3a3f3b:#3A3F3B;
  --ew6-xecece7:#ECECE7;
  --ew6-xfbfaf7:#FBFAF7;
}