/* ============================================================================
   MB Design System Foundation v1: token layer
   Strategy: Precise Mechanism Humanism
   Source: MB-Website-Design-Research/06_stage_3_visual_design_system/tokens/

   Imported verbatim from the approved Stage 3 tokens, with two documented
   accessibility remediations (see CONTRAST REMEDIATIONS below). Both stay
   inside the approved graphite ramp; no new hue is introduced.

   Heebo is self-hosted. No external font request is made from any page.
   ========================================================================== */

/* --- Heebo, self-hosted, subset. See src/fonts/README.md for the build. --- */

@font-face {
  font-family: "Heebo";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../fonts/heebo-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
    U+02DA, U+02DC, 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: "Heebo";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../fonts/heebo-hebrew.woff2") format("woff2");
  unicode-range: U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F;
}

:root {
  color-scheme: light;

  --mb-paper: #f7f8f7;
  --mb-white: #fff;

  --mb-graphite-50: #f1f3f4;
  --mb-graphite-100: #e5e9eb;
  --mb-graphite-200: #cdd4d8;
  --mb-graphite-300: #abb6bc;
  --mb-graphite-400: #7d8b94;
  --mb-graphite-500: #5f6e78;
  --mb-graphite-600: #46545e;
  --mb-graphite-700: #34414b;
  --mb-graphite-800: #25313a;
  --mb-graphite-900: #18232c;
  --mb-graphite-950: #101820;

  --mb-atlantic-50: #eef5f9;
  --mb-atlantic-100: #d9e9f2;
  --mb-atlantic-200: #b8d6e6;
  --mb-atlantic-300: #86b8d2;
  --mb-atlantic-400: #5498bb;
  --mb-atlantic-500: #327ba3;
  --mb-atlantic-600: #246389;
  --mb-atlantic-700: #1b4e6e;
  --mb-atlantic-800: #173f58;
  --mb-atlantic-900: #123246;
  --mb-atlantic-950: #091f2d;

  --mb-oxide-50: #fcf4f0;
  --mb-oxide-100: #f8e5dc;
  --mb-oxide-200: #f0c7b6;
  --mb-oxide-300: #e5a185;
  --mb-oxide-400: #d77855;
  --mb-oxide-500: #c45b36;
  --mb-oxide-600: #a9472c;
  --mb-oxide-700: #873824;
  --mb-oxide-800: #6d3023;
  --mb-oxide-900: #59291f;
  --mb-oxide-950: #30130e;

  --mb-info: #246389;
  --mb-success: #2f6b55;
  --mb-warning: #a95b21;
  --mb-error: #b42318;
  --mb-focus: #327ba3;
  --mb-tap-highlight: rgb(50 123 163 / 0.22);

  /* ---- CONTRAST REMEDIATIONS (2026-07-27) ----------------------------------
     Logged in design-system/governance/token-inventory-and-change-log.md.

     R1  --mb-border-control replaces the bare graphite-300 that Stage 3 used
         as an input boundary. graphite-300 (#abb6bc) measures 2.07:1 on white,
         below the 3:1 WCAG 2.2 requirement for a boundary that identifies a
         control. graphite-400 measures 3.50:1 on white. The graphite-300 token
         itself is unchanged and still valid for decorative rules and dividers.

     R2  --mb-disabled moves from graphite-400 (#7d8b94, 3.29:1 on paper) to
         graphite-500 (#5f6e78, 4.95:1 on paper). guidelines/accessibility-qa.md
         requires disabled text to stay legible while non-interactive.
     -------------------------------------------------------------------------- */
  --mb-border-control: var(--mb-graphite-400); /* 3.50:1 on white */
  --mb-disabled: var(--mb-graphite-500); /* 4.95:1 on paper */

  --mb-font-sans: "Heebo", system-ui, -apple-system, BlinkMacSystemFont,
    "Segoe UI", sans-serif;
  --mb-weight-regular: 400;
  --mb-weight-medium: 500;
  --mb-weight-semibold: 600;
  --mb-weight-bold: 700;

  --mb-text-caption: 0.8125rem;
  --mb-text-label: 0.875rem;
  --mb-text-body-sm: 0.9375rem;
  --mb-text-body: 1.0625rem;
  --mb-text-body-lg: 1.1875rem;
  --mb-text-h4: 1.375rem;
  --mb-text-h3: clamp(1.625rem, 2.4vw, 2rem);
  --mb-text-h2: clamp(2rem, 3.5vw, 3rem);
  /* T1: h1 minimum lowered from 2.5rem to 2.125rem (2026-07-27).
     At 2.5rem (40px) the longest single-token terms this site must set as an
     h1 measure 318 to 319px against a 288px content column at 320px viewport,
     so they broke mid-word. Measured in Heebo semibold: at 2.125rem (34px)
     the widest ("Electrophysiology", "Bradyarrhythmias") measure 271px, a
     17px margin. 2.25rem was rejected as a 1px margin.
     Stage 3 permits tuning numeric tokens where real bilingual layout
     demonstrates a need; this is that demonstration. Logged in
     governance/token-inventory-and-change-log.md. */
  --mb-text-h1: clamp(2.125rem, 5vw, 4.5rem);
  --mb-text-display: clamp(3rem, 7vw, 5.75rem);

  --mb-leading-tight: 1.12;
  --mb-leading-heading: 1.2;
  --mb-leading-body: 1.7;
  --mb-leading-compact: 1.45;

  --mb-space-0: 0;
  --mb-space-1: 0.25rem;
  --mb-space-2: 0.5rem;
  --mb-space-3: 0.75rem;
  --mb-space-4: 1rem;
  --mb-space-5: 1.25rem;
  --mb-space-6: 1.5rem;
  --mb-space-8: 2rem;
  --mb-space-10: 2.5rem;
  --mb-space-12: 3rem;
  --mb-space-16: 4rem;
  --mb-space-20: 5rem;
  --mb-space-24: 6rem;
  --mb-space-32: 8rem;

  --mb-radius-sm: 0.25rem;
  --mb-radius-md: 0.5rem;
  --mb-radius-lg: 0.75rem;
  --mb-radius-panel: 1rem;
  --mb-radius-round: 999px;

  --mb-border-thin: 1px;
  --mb-border-strong: 2px;
  --mb-edge-clinical: 4px;

  --mb-shadow-sm: 0 1px 2px rgb(16 24 32 / 0.08);
  --mb-shadow-md: 0 8px 24px rgb(16 24 32 / 0.1);
  --mb-shadow-focus: 0 0 0 3px rgb(50 123 163 / 0.3);

  --mb-content-max: 75rem;
  --mb-reading-max: 44rem;
  --mb-gutter: clamp(1rem, 3vw, 2rem);

  /* Minimum interactive target. CLAUDE.md mandates 48px, above the WCAG
     2.2 AA floor of 24px and the 44px the Stage 3 guidelines suggest. */
  --mb-target-min: 48px;

  /* Measured height of the single-row masthead at the desktop breakpoint,
     where it is sticky. Anchor targets offset by this so a legacy deep link
     never lands underneath it. See docs/ROUTING.md. */
  --mb-masthead-h: 4.75rem;

  --mb-motion-fast: 120ms;
  --mb-motion-standard: 200ms;
  --mb-motion-slow: 320ms;
  --mb-ease-standard: cubic-bezier(0.2, 0, 0, 1);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  font-family: var(--mb-font-sans);
  color: var(--mb-graphite-900);
  background: var(--mb-paper);
  text-size-adjust: 100%;
}

body {
  margin: 0;
  font-size: var(--mb-text-body);
  line-height: var(--mb-leading-body);
}

:where(button, input, select, textarea) {
  font: inherit;
}

:where(a, button, input, select, textarea, summary):focus-visible {
  outline: 2px solid var(--mb-focus);
  outline-offset: 3px;
  box-shadow: var(--mb-shadow-focus);
}

:where(a, button, summary) {
  touch-action: manipulation;
  -webkit-tap-highlight-color: var(--mb-tap-highlight);
}

.mb-container {
  inline-size: min(100% - (2 * var(--mb-gutter)), var(--mb-content-max));
  margin-inline: auto;
}

.mb-reading {
  max-inline-size: var(--mb-reading-max);
}

.mb-display,
.mb-h1,
.mb-h2,
.mb-h3,
.mb-h4 {
  margin-block: 0;
  font-weight: var(--mb-weight-semibold);
  line-height: var(--mb-leading-heading);
  text-wrap: balance;
}

.mb-display {
  font-size: var(--mb-text-display);
  line-height: var(--mb-leading-tight);
}

.mb-h1 {
  font-size: var(--mb-text-h1);
}

.mb-h2 {
  font-size: var(--mb-text-h2);
}

.mb-h3 {
  font-size: var(--mb-text-h3);
}

.mb-h4 {
  font-size: var(--mb-text-h4);
}

.mb-numerals {
  font-variant-numeric: tabular-nums;
}

.mb-surface-light {
  color: var(--mb-graphite-900);
  background: var(--mb-paper);
}

.mb-surface-depth {
  color: var(--mb-white);
  background: var(--mb-graphite-950);
}

.mb-card {
  min-block-size: 0;
  padding: var(--mb-space-6);
  border: var(--mb-border-thin) solid var(--mb-graphite-200);
  border-radius: var(--mb-radius-lg);
  background: var(--mb-white);
  box-shadow: var(--mb-shadow-sm);
}

.mb-clinical-edge {
  border-inline-start: var(--mb-edge-clinical) solid var(--mb-atlantic-600);
}

.mb-clinical-edge[data-signal="oxide"] {
  border-inline-start-color: var(--mb-oxide-500);
}

.mb-state {
  --mb-state-color: var(--mb-info);
  --mb-state-tint: var(--mb-atlantic-50);
  padding: var(--mb-space-4);
  border: var(--mb-border-thin) solid color-mix(in srgb, var(--mb-state-color) 35%, white);
  border-inline-start: var(--mb-edge-clinical) solid var(--mb-state-color);
  border-radius: var(--mb-radius-md);
  background: var(--mb-state-tint);
}

.mb-state[data-state="success"] {
  --mb-state-color: var(--mb-success);
  --mb-state-tint: #edf5f1;
}

.mb-state[data-state="warning"] {
  --mb-state-color: var(--mb-warning);
  --mb-state-tint: #fbf3e9;
}

.mb-state[data-state="error"] {
  --mb-state-color: var(--mb-error);
  --mb-state-tint: #fdf0ef;
}

[dir="rtl"] {
  font-feature-settings: "kern";
}

/* Latin islands inside Hebrew copy keep their intrinsic direction.
   guidelines/rtl-responsive.md: emails, URLs, phone numbers and numeric
   sequences preserve internal order. */
[dir="rtl"] :where(input[type="email"], input[type="tel"], input[type="url"], input[type="number"]) {
  direction: ltr;
  text-align: start;
}

.mb-ltr {
  direction: ltr;
  unicode-bidi: isolate;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}