/* MedScout Design System
 * colors_and_type.css — single source of truth.
 *
 * Token values follow the MedScout Marketing Style Library
 * (Figma, exported 2026-05-12 — uploads/medscout-marketing-style-library.md).
 *
 * Where the production Webflow site adds extensions on top of the library
 * (asymmetric card corners, the `.button` atom, page-wash & hairline
 * surfaces), those are kept in a second layer below the tokens — marked
 * `[production extension]`. Library tokens win on disagreement.
 */

/* ---------- Fonts ---------- */
@font-face {
  font-family: 'Inter Variable';
  src: url('fonts/Inter-VariableFont.ttf') format('truetype-variations'),
       url('fonts/Inter-VariableFont.ttf') format('truetype');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ===== COLOR (production tokens, verbatim) =====
   * Webflow var          →  our var
   * --color--blue        →  --color-blue
   * --color--teal        →  --color-blue-green   (note: Webflow calls #31B0C8 "teal")
   * --color--green       →  --color-green        (#32D9C3)
   * --color--dark        →  --color-ink
   * --dark-faded         →  --color-text-muted
   */

  /* ----- Brand anchors (library: Blue / Blue Green / Green / Gray) ----- */
  --color-blue:         #2391D9;
  --color-blue-green:   #31B0C8;   /* aka --color--teal in Webflow */
  --color-green:        #32D9C3;
  --color-gray:         #292B33;   /* near-black; library's "Gray" anchor */

  /* Semantic alias for the ink color (kept for clarity in components) */
  --color-ink:          var(--color-gray);
  --color-ink-faded:    #525666;   /* [production extension] Webflow's --dark-faded */

  /* ----- Blue scale (library) ----- */
  --color-blue-shade-1:       #1B7DBD;
  --color-blue-tint-1:        #4FA7E1;
  --color-blue-tint-2:        #A7D3F0;
  --color-blue-tint-3:        #E1F0F9;   /* most-used soft surface */
  --color-blue-tint-4:        #F6FBFF;   /* [production extension] page wash */

  /* ----- Blue Green scale (library) ----- */
  --color-blue-green-shade-1: #299EB4;
  --color-blue-green-tint-1:  #4BBDD3;
  --color-blue-green-tint-2:  #A8E0EB;
  --color-blue-green-tint-3:  #E2F5F8;

  /* ----- Green scale (library) ----- */
  --color-green-shade-1:      #26B4A1;
  --color-green-tint-1:       #64E2D2;
  --color-green-tint-2:       #A6E1D9;
  --color-green-tint-3:       #E4F6F3;
  --color-green-for-tags:     #2CC7B2;   /* [production extension] green text on green-tint-3 */

  /* ----- Gray scale (library) ----- */
  --color-gray-tint-1:        #808B92;
  --color-gray-tint-2:        #ABB1B6;
  --color-gray-tint-3:        #D5D8DB;
  --color-light-grey:         #EFF2F5;   /* [production extension] default border / soft surface */
  --color-drop-shadow:        rgba(213, 216, 219, 0.4);   /* derived from gray-tint-3 @ 40% */

  --color-white:       #FFFFFF;
  --color-black:       #000000;

  /* ----- Brand gradient (library) ----- */
  --gradient-brand:    linear-gradient(to right, #2391D9, #32D9C3);
  --gradient-brand-vertical: linear-gradient(to bottom, #2391D9, #32D9C3);

  /* ===== SEMANTIC ===== */
  --fg-1: var(--color-ink);
  --fg-2: var(--color-ink-faded);
  --fg-link: var(--color-blue);
  --fg-on-brand: var(--color-white);

  --bg-page: var(--color-white);
  --bg-page-wash: var(--color-blue-tint-4);
  --bg-pill: var(--color-blue-tint-3);
  --bg-card: var(--color-white);

  --border-default: var(--color-light-grey);

  /* ===== Back-compat aliases =====
   * Earlier versions of this skill used these names. Kept so existing
   * UI-kit files keep working. Prefer the production names above. */
  --color-text-muted:  var(--color-ink-faded);
  --color-pill-bg:     var(--color-blue-tint-3);
  --color-surface-blue:var(--color-blue-tint-4);
  --color-hairline:    var(--color-light-grey);

  /* ===== TYPE =====
   * Webflow uses --font--global: "Inter Variable", sans-serif.
   * Headings use weight 500 with -0.02em tracking for h1–h4.
   */
  --font-sans:    'Inter Variable', 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-display: var(--font-sans);
  --font-mono:    ui-monospace, 'SF Mono', Menlo, Monaco, monospace;

  /* ----- Type scale (library values) -----
   *  All headings: Inter Medium (500), letter-spacing 0.
   *  All body: line-height 1.5, letter-spacing 0.
   *  Library note: Semi Bold / Bold / Extra Bold body styles all map to
   *  weight 500 in Figma — the naming distinction is design intent only.
   */
  --h1-size: 4.375rem;   --h1-line: 1.2;   /* 70px */
  --h2-size: 3.75rem;    --h2-line: 1.2;   /* 60px */
  --h3-size: 3.125rem;   --h3-line: 1.2;   /* 50px */
  --h4-size: 2.5rem;     --h4-line: 1.2;   /* 40px */
  --h5-size: 1.875rem;   --h5-line: 1.4;   /* 30px */
  --h6-size: 1.25rem;    --h6-line: 1.4;   /* 20px */

  --text-lg:      1.25rem;    /* 20px — large body */
  --text-md:      1.125rem;   /* 18px — medium body / lede */
  --text-base:    1rem;       /* 16px — regular body */
  --text-sm:      0.875rem;   /* 14px — small body */
  --text-xs:      0.75rem;    /* 12px — tiny / tags */
  --leading-body: 1.5;

  --tracking-display: 0;       /* library: 0 for all headings */
  --weight-display:   500;
  --weight-medium:    500;
  --weight-regular:   400;
  --weight-bold:      500;     /* library: "bold" body styles render at 500 */

  /* ===== SPACING (Webflow .spacer-* + .padding-section-*) ===== */
  --space-tiny:    0.25rem;   /*  4px  — .spacer-tiny       */
  --space-xxsmall: 0.5rem;    /*  8px  — .spacer-xxsmall    */
  --space-xsmall:  1rem;      /* 16px  — .spacer-xsmall     */
  --space-small:   1.5rem;    /* 24px  — .spacer-small      */
  --space-medium:  2rem;      /* 32px  — .spacer-medium     */
  --space-large:   3rem;      /* 48px  — .spacer-large      */
  --space-xlarge:  4rem;      /* 64px  — section medium pad */
  --space-xxlarge: 5rem;      /* 80px  — section large pad  */
  --space-xxxlarge:7rem;      /*112px  — desktop section lg */

  /* Numeric aliases for grid layouts */
  --space-1: 4px;  --space-2: 8px;  --space-3: 12px; --space-4: 16px;
  --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px;
  --space-12: 48px; --space-16: 64px; --space-20: 80px; --space-28: 112px;

  /* Layout */
  --container-large: 75.5rem;  /* 1208px — .container-large */
  --container-small: 48rem;    /*  768px — .container-small */
  --page-pad-x:      2rem;     /*  32px  side gutters */

  /* ===== RADII (production) ===== */
  --radius-tiny:   0.3125rem;  /*  5px  — .border-radius--tiny  (default button) */
  --radius-small:  1rem;       /* 16px  — .border-radius--small */
  --radius-medium: 2rem;       /* 32px  — .border-radius--medium (cards: TL+BR only) */
  --radius-large:  3.75rem;    /* 60px  — .border-radius--large  (hero cards: TL+BR) */
  --radius-pill:   10000rem;   /* fully round */

  /* ===== BORDER WIDTHS ===== */
  --border-small:  0.0625rem;  /* 1px */
  --border-medium: 0.125rem;   /* 2px */
  --border-large:  0.25rem;    /* 4px */

  /* ===== SHADOWS (library: 7-tier scale) =====
   * All shadows tint from gray-tint-3 (#D5D8DB) except --shadow-lg,
   * which uses true black at 8% — the one library shadow with hard contrast.
   */
  --shadow-xxs: 0 1px 2px rgba(213, 216, 219, 0.4);
  --shadow-xs:  0 1px 2px rgba(213, 216, 219, 0.2),
                0 1px 3px rgba(213, 216, 219, 0.4);
  --shadow-sm:  0 2px 4px -2px rgba(213, 216, 219, 0.2),
                0 4px 8px -2px rgba(213, 216, 219, 0.4);
  --shadow-md:  0 4px  6px -2px rgba(213, 216, 219, 0.4),
                0 12px 16px -4px rgba(213, 216, 219, 0.4);
  --shadow-lg:  0 20px 24px -4px rgba(0, 0, 0, 0.08);
  --shadow-xl:  0 24px 48px -12px rgba(213, 216, 219, 0.4);
  --shadow-2xl: 0 32px 64px -12px rgba(213, 216, 219, 0.4);

  /* [production extension] specific shadows used in the live site */
  --shadow-card:     0 5px  1rem 0      var(--color-drop-shadow);   /* .card-small.z-index-2 */
  --shadow-card-lg:  0 10px 1rem -0.5rem var(--color-drop-shadow);   /* .card-tiny.cycle, .card-large.diff */

  /* ===== MOTION =====
   * Webflow buttons use cubic-bezier(.19,1,.22,1) — easeOutExpo-ish.
   */
  --ease-out: cubic-bezier(0.19, 1, 0.22, 1);
  --dur-fast: 180ms;
  --dur-base: 300ms;
  --dur-slow: 480ms;
}

/* ---------- Base ---------- */
html, body {
  font-family: var(--font-sans);
  color: var(--fg-1);
  background: var(--bg-page);
  font-size: var(--text-base);
  line-height: var(--leading-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ---------- Semantic type (mirrors .heading-style-h*) ---------- */
h1, .h1 {
  font-family: var(--font-display); font-weight: var(--weight-display);
  font-size: var(--h1-size); line-height: var(--h1-line);
  letter-spacing: 0; color: var(--fg-1); margin: 0;
}
h2, .h2 {
  font-family: var(--font-display); font-weight: var(--weight-display);
  font-size: var(--h2-size); line-height: var(--h2-line);
  letter-spacing: 0; color: var(--fg-1); margin: 0;
}
h3, .h3 {
  font-family: var(--font-display); font-weight: var(--weight-display);
  font-size: var(--h3-size); line-height: var(--h3-line);
  letter-spacing: 0; color: var(--fg-1); margin: 0;
}
h4, .h4 {
  font-family: var(--font-display); font-weight: var(--weight-display);
  font-size: var(--h4-size); line-height: var(--h4-line);
  letter-spacing: 0; color: var(--fg-1); margin: 0;
}
h5, .h5 {
  font-weight: var(--weight-display);
  font-size: var(--h5-size); line-height: var(--h5-line);
  color: var(--fg-1); margin: 0;
}
h6, .h6 {
  font-weight: var(--weight-display);
  font-size: var(--h6-size); line-height: var(--h6-line);
  color: var(--fg-1); margin: 0;
}
p, .text-size-regular {
  font-size: var(--text-base); line-height: var(--leading-body);
  color: var(--fg-1); margin: 0;
}
.text-size-large  { font-size: var(--text-lg); line-height: 1.5; }
.text-size-medium { font-size: var(--text-md); line-height: 1.5; }
.text-size-small  { font-size: var(--text-sm); line-height: 1.5; }
.text-size-tiny   { font-size: var(--text-xs); line-height: 1.5; }
.text-muted       { color: var(--fg-2); }

/* Body weight modifiers (library naming).
 * Library note: "bold" weights all render at 500 in Figma; we follow suit
 * so designs match the style guide. If you need a true bold, use 700 explicitly. */
.text-weight-light      { font-weight: 400; }
.text-weight-normal     { font-weight: 400; }
.text-weight-medium     { font-weight: 500; }
.text-weight-semibold   { font-weight: 500; }
.text-weight-bold       { font-weight: 500; }
.text-weight-extrabold  { font-weight: 500; }

a { color: var(--fg-link); text-decoration: none;
    transition: filter var(--dur-base) var(--ease-out); }
a:hover { filter: brightness(0.93); }

/* ---------- Atoms (mirror Webflow class names) ---------- */

/* .button — primary blue, 5px radius, 12px×24px, weight 500.
 * Hover: brightness(0.93) + translateY(-2.4px). */
.button {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 0.25em;
  font-family: var(--font-sans); font-weight: 500;
  padding: 0.75rem 1.5rem;
  border: var(--border-small) solid var(--color-blue);
  border-radius: var(--radius-tiny);
  background: var(--color-blue);
  color: var(--color-white);
  text-align: center; text-decoration: none; cursor: pointer;
  transition: transform var(--dur-base) var(--ease-out),
              filter    var(--dur-base) var(--ease-out);
}
.button:hover { filter: brightness(0.93); transform: translateY(-0.15rem); }

.button.is-secondary {
  background: var(--color-blue-tint-3);
  border-color: var(--color-blue-tint-3);
  color: var(--color-ink);
}
.button.is-tertiary {
  background: var(--color-white);
  border-color: var(--color-white);
  color: #000;
}
.button.is-teal  { background: var(--color-blue-green); border-color: var(--color-blue-green); }
.button.is-green { background: var(--color-green);      border-color: var(--color-green); }
.button.is-small { padding: 0.5rem 1.25rem; font-size: 0.85rem; }
.button.is-link {
  background: transparent; border: none; padding: 0.25rem 0;
  color: var(--color-ink); line-height: 1;
}

/* .tag — small pill used for taxonomies + filters.
 * Default: blue text on blue-tint-3, 6px radius, 12px font. */
.tag {
  display: inline-flex; align-items: center;
  background: var(--color-blue-tint-3);
  color: var(--color-blue);
  font-size: var(--text-xs); font-weight: 500; line-height: 1.5;
  padding: 0.25rem 0.5rem;
  border: var(--border-small) solid var(--color-light-grey);
  border-radius: 0.375rem;   /* 6px — explicit in production CSS */
}
.tag.is-filter { padding: 0.5rem 0.75rem; font-size: 1rem; cursor: pointer; }
.tag.is-small  { font-size: 0.65rem; }

/* Signature card — TL & BR rounded only.
 * .card-large = 60px corners, 64px padding.
 * .card-small = 32px corners, 32px padding.
 * .card-tiny  = 32px corners, 24px padding. */
.card-large {
  background: var(--bg-card);
  border: var(--border-small) solid var(--color-light-grey);
  border-top-left-radius:     var(--radius-large);
  border-bottom-right-radius: var(--radius-large);
  padding: 4rem;
}
.card-small {
  background: var(--bg-card);
  border: var(--border-small) solid var(--color-light-grey);
  border-top-left-radius:     var(--radius-medium);
  border-bottom-right-radius: var(--radius-medium);
  padding: 2rem;
  min-height: 18.5rem;
}
.card-tiny {
  background: var(--bg-card);
  border: var(--border-small) solid var(--color-light-grey);
  border-top-left-radius:     var(--radius-medium);
  border-bottom-right-radius: var(--radius-medium);
  padding: 1.5rem;
}
.card-large.background-color-tint-blue-3,
.card-small.background-color-tint-blue-3,
.card-tiny.background-color-tint-blue-3  { background: var(--color-blue-tint-3); }
.card-large.background-color-tint-blue-4 { background: var(--color-blue-tint-4); }

/* Background-color helpers */
.background-color-gray         { background: var(--color-light-grey); }
.background-color-white        { background: var(--color-white); }
.background-color-black        { background: var(--color-ink); color: var(--color-white); }
.background-color-tint-blue-3  { background: var(--color-blue-tint-3); }
.background-color-tint-teal-3  { background: var(--color-blue-green-tint-3); }
.background-color-tint-green-3 { background: var(--color-green-tint-3); }
.background-color-tint-blue-4  { background: var(--color-blue-tint-4); }

/* Layout */
.container-large { width: 100%; max-width: var(--container-large); margin-inline: auto; }
.container-small { width: 100%; max-width: var(--container-small); margin-inline: auto; }
.padding-section-small  { padding-block: 3rem; }
.padding-section-medium { padding-block: 4rem; }
.padding-section-large  { padding-block: 6rem; }
@media (min-width: 992px) {
  .padding-section-medium { padding-block: 5rem; }
  .padding-section-large  { padding-block: 7rem; }
}

/* Spacers */
.spacer-tiny    { padding-top: 0.25rem; }
.spacer-xxsmall { padding-top: 0.5rem; }
.spacer-xsmall  { padding-top: 1rem; }
.spacer-small   { padding-top: 1.5rem; }
.spacer-medium  { padding-top: 2rem; }
.spacer-large   { padding-top: 3rem; }

/* ---------- Bonus: convenience aliases for design-system pages ---------- */
.ms-eyebrow {  /* small inline pill used as section eyebrow */
  display: inline-flex; align-items: center;
  background: var(--color-blue-tint-3);
  color: var(--color-blue);
  font-size: var(--text-sm); font-weight: 500; line-height: 1.5;
  padding: 0.5rem 0.875rem;
  border-radius: 0.375rem;
  border: var(--border-small) solid var(--color-light-grey);
}

/* ---------- Form atoms (library UI Elements section) ----------
 * Library shows: text input, textarea, select, checkbox, radio.
 * All use 5px radius (--radius-tiny), 1px border in light grey, Inter 400.
 * Focus state: brand blue ring (consistent across all inputs).
 */
.ms-input,
.ms-textarea,
.ms-select {
  display: block;
  width: 100%;
  font-family: var(--font-sans);
  font-size: var(--text-base);
  font-weight: 400;
  line-height: 1.5;
  color: var(--color-ink);
  background: var(--color-white);
  border: var(--border-small) solid var(--color-gray-tint-3);
  border-radius: var(--radius-tiny);
  padding: 0.625rem 0.875rem;
  transition: border-color var(--dur-fast) var(--ease-out),
              box-shadow   var(--dur-fast) var(--ease-out);
}
.ms-input::placeholder,
.ms-textarea::placeholder { color: var(--color-gray-tint-1); }
.ms-input:hover,
.ms-textarea:hover,
.ms-select:hover { border-color: var(--color-gray-tint-2); }
.ms-input:focus,
.ms-textarea:focus,
.ms-select:focus {
  outline: none;
  border-color: var(--color-blue);
  box-shadow: 0 0 0 3px var(--color-blue-tint-3);
}
.ms-textarea { min-height: 6.5rem; resize: vertical; }

.ms-select {
  appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none' stroke='%23808B92' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='4 6 8 10 12 6'/></svg>");
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  padding-right: 2.25rem;
}

/* Checkbox & radio share a 16px box; radio is fully round. */
.ms-checkbox,
.ms-radio {
  appearance: none;
  width: 1rem;
  height: 1rem;
  margin: 0;
  background: var(--color-white);
  border: var(--border-small) solid var(--color-gray-tint-2);
  display: inline-grid;
  place-content: center;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out);
}
.ms-checkbox { border-radius: 0.25rem; }
.ms-radio    { border-radius: 50%; }

.ms-checkbox:checked,
.ms-radio:checked {
  background: var(--color-blue);
  border-color: var(--color-blue);
}
.ms-checkbox:checked::before {
  content: "";
  width: 0.625rem; height: 0.625rem;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='2 6 5 9 10 3'/></svg>") center/contain no-repeat;
}
.ms-radio:checked::before {
  content: "";
  width: 0.375rem; height: 0.375rem;
  border-radius: 50%;
  background: var(--color-white);
}

.ms-field-label {
  display: block;
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-ink);
  margin-bottom: 0.375rem;
}
.ms-field-row {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--color-ink);
  font-size: var(--text-sm);
  cursor: pointer;
}

/* ---------- Gradient utility (library: brand gradient) ---------- */
.bg-gradient-brand        { background: var(--gradient-brand); }
.text-gradient-brand {
  background: var(--gradient-brand);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}