/* ============================================================================
   Orasis HCP Portal — shared brand stylesheet
   Design tokens lifted from the live orasis-pharma.com (inspected
   2026-09-16), reconciled with the 2022 brand guidelines PDF.

   Font: Montserrat, which is what the live site runs. Self-hosted rather
   than pulled from Google Fonts for two reasons — healthcare practice
   networks frequently block external CDNs, and this page is behind a
   sign-in showing Rx data, so it should not emit a third-party request
   on every load. One variable woff2 (37 KB) covers every weight.

   Accessibility: the live site's coral CTA is white-on-#F0005E at 4.32:1,
   which is under the 4.5:1 AA bar for normal text. We keep the brand
   colour but set button labels at 19px/700 — WCAG counts >=18.66px bold
   as large text, where the bar is 3:1. Body copy uses #3A4250 (9.0:1)
   and headings #201449 (16.6:1).
   ========================================================================= */

@font-face{
  font-family:"Montserrat";
  src:url("fonts/montserrat-var.woff2") format("woff2-variations");
  font-weight:100 900;
  font-style:normal;
  font-display:swap;
}

:root{
  /* Brand palette — 2022 guidelines p17 */
  --navy:#201449;        /* Deep Navy      — headings, dark surfaces */
  --blue:#3F61FF;        /* Electric Blue  — accents, focus */
  --grape:#6E00AA;       /* Vivid Grape    — gradient end */
  --coral:#F0005E;       /* Coral Flame    — primary CTA (large text only) */
  --mist:#DCDCDC;        /* Gray Mist      — borders */
  --slate:#0F4887;       /* Blue Slate     — links */
  /* Neutrals as used on the live site */
  --ink:#3A4250;         /* body copy */
  --page:#F7F9FC;        /* page ground */
  --muted:#6B7280;
  --line:#E6EAF0;
  /* Elevation — matched to the live site's two shadow steps */
  --card-shadow:0 2px 8px rgba(0,0,0,.06);
  --lift-shadow:0 8px 30px rgba(0,0,0,.12);
  --radius:12px;         /* the site's dominant card radius */
  --font:"Montserrat",-apple-system,"Segoe UI",Verdana,Arial,sans-serif;
}

*{box-sizing:border-box}

body{
  margin:0;
  background:var(--page);
  color:var(--ink);
  font:400 16px/1.6 var(--font);
  -webkit-font-smoothing:antialiased;
}

/* Headings follow the site: Montserrat, uppercase, bold, navy. */
h1,h2,h3{font-family:var(--font);color:var(--navy);text-transform:uppercase;margin:0;}
h1{font-size:28px;font-weight:700;letter-spacing:-.2px;line-height:1.2;}
h2{font-size:20px;font-weight:700;letter-spacing:.4px;line-height:1.25;}
h3{font-size:15px;font-weight:700;letter-spacing:.5px;line-height:1.3;}

a{color:var(--slate);}

/* The brand gradient, used as a hairline rule the way the site uses it
   as an accent edge. */
.rule{height:4px;background:linear-gradient(90deg,var(--blue),var(--grape));}

.card{
  background:#FFFFFF;
  border-radius:var(--radius);
  box-shadow:var(--card-shadow);
  overflow:hidden;
}

/* Pill CTA, matching the site's 9999px radius and uppercase label. */
.btn{
  display:inline-block;width:100%;border:0;cursor:pointer;
  background:var(--coral);color:#FFFFFF;
  font:700 19px/1 var(--font);
  text-transform:uppercase;letter-spacing:.6px;
  padding:16px 24px;border-radius:9999px;
  transition:background .15s ease;
}
.btn:hover{background:#D10052;}
.btn:focus-visible{outline:3px solid var(--blue);outline-offset:3px;}

label{
  display:block;font:600 12px/1 var(--font);
  text-transform:uppercase;letter-spacing:.56px;
  color:var(--navy);margin-bottom:8px;
}

input[type=email]{
  width:100%;padding:13px 14px;
  font:400 16px var(--font);color:var(--ink);
  background:#FFFFFF;border:1px solid var(--mist);border-radius:8px;outline:none;
}
input[type=email]:focus{border-color:var(--blue);box-shadow:0 0 0 3px rgba(63,97,255,.18);}

.logo{display:block;height:auto;}

/* Respect reduced-motion preferences. */
@media (prefers-reduced-motion:reduce){
  *{transition:none!important;animation:none!important;}
}