/*
 * MME V4 Design Tokens — Big Medical + Fluent 2 hybrid
 * Palette: Corporate blue (Roche/Thermo/bioMérieux family) + editorial orange accent
 * Type: Source Serif 4 (editorial hero + stat numbers) + Inter (everything else)
 * Structure: Fluent 2 component anatomy (36px rows, 32px controls, 4px radii, semantic tokens)
 *
 * Uses SAME CSS variable names as v3 file (--f2-*) so v3 components render correctly.
 * Values are different: corporate navy instead of Communication Blue, orange accent added,
 * serif font family exposed for editorial moments.
 */

:root {
  /* ===== CORPORATE BRAND RAMP — navy family ===== */
  --f2-brand-10: #01050B;
  --f2-brand-20: #030A17;
  --f2-brand-30: #051020;
  --f2-brand-40: #071930;
  --f2-brand-50: #0A2340;
  --f2-brand-60: #002855;         /* pressed / selected */
  --f2-brand-70: #003268;
  --f2-brand-80: #003D80;         /* PRIMARY — headline nav, filled buttons */
  --f2-brand-90: #0055B3;
  --f2-brand-100: #0066CC;        /* interactive hover, links */
  --f2-brand-110: #2E85D9;
  --f2-brand-120: #5CA0DF;
  --f2-brand-130: #7FAAD9;
  --f2-brand-140: #B4CBE3;
  --f2-brand-150: #C4D0DF;
  --f2-brand-160: #E6F0FA;        /* light tint — selected row, subtle backgrounds */

  /* ===== EDITORIAL ACCENT — orange (Bio-Rad-inspired, used sparingly) ===== */
  --mme-editorial-50:  #FDF3E9;
  --mme-editorial-100: #FEF3E2;
  --mme-editorial-200: #FBD7B3;
  --mme-editorial-400: #E36414;   /* PRIMARY EDITORIAL — In focus tags, stat numbers on dark bg */
  --mme-editorial-600: #A03D0A;
  --mme-editorial-800: #5F2306;

  /* ===== NEUTRAL FOREGROUND ===== */
  --f2-fg-1: #1A2332;             /* primary text, denser than pure black */
  --f2-fg-2: #3D4A5E;
  --f2-fg-3: #5A6B85;
  --f2-fg-4: #C4D0DF;
  --f2-fg-disabled: #C4D0DF;
  --f2-fg-inverted: #FFFFFF;
  --f2-fg-on-brand: #FFFFFF;
  --mme-fg-on-brand-muted: #C4D0DF;

  /* ===== NEUTRAL BACKGROUND ===== */
  --f2-bg-1: #FFFFFF;
  --f2-bg-1-hover: #FAFBFD;
  --f2-bg-1-pressed: #E5E9F0;
  --f2-bg-1-selected: #E5E9F0;
  --f2-bg-2: #FAFBFD;
  --f2-bg-2-hover: #F3F5F9;
  --f2-bg-3: #F3F5F9;
  --f2-bg-4: #F3F5F9;             /* canvas */
  --f2-bg-5: #E5E9F0;
  --f2-bg-6: #C4D0DF;
  --f2-bg-disabled: #F3F5F9;
  --f2-bg-subtle-hover: #F3F5F9;
  --f2-bg-subtle-pressed: #E5E9F0;

  /* ===== STROKE ===== */
  --f2-stroke-1: #C4D0DF;
  --f2-stroke-2: #E5E9F0;
  --f2-stroke-3: #F0F2F5;
  --f2-stroke-accessible: #5A6B85;
  --f2-stroke-accessible-hover: #3D4A5E;
  --f2-stroke-disabled: #E5E9F0;

  /* ===== BRAND-TINTED BACKGROUNDS ===== */
  --f2-brand-bg-1: #E6F0FA;
  --f2-brand-bg-1-hover: #C4D8F2;
  --f2-brand-bg-1-pressed: #B4CBE3;
  --f2-brand-bg-1-selected: #C4D8F2;
  --f2-brand-bg: #003D80;
  --f2-brand-bg-hover: #0066CC;
  --f2-brand-bg-pressed: #002855;
  --f2-brand-bg-selected: #002855;
  --f2-brand-stroke-1: #003D80;
  --f2-brand-stroke-2: #B4CBE3;
  --f2-brand-stroke-2-contrast: #7FAAD9;
  --f2-brand-fg-1: #003D80;
  --f2-brand-fg-2: #0066CC;
  --f2-brand-fg-link: #0066CC;
  --f2-brand-fg-link-hover: #003D80;

  /* ===== SEMANTIC ===== */
  --f2-success-bg-1: #E1F5EE;
  --f2-success-bg-2: #9FE1CB;
  --f2-success-bg-3: #0F6E56;
  --f2-success-fg-1: #0F6E56;
  --f2-success-fg-3: #FFFFFF;
  --f2-success-border-1: #9FE1CB;
  --f2-success-border-2: #0F6E56;

  --f2-warning-bg-1: #FEF3E2;
  --f2-warning-bg-3: #A03D0A;
  --f2-warning-fg-1: #A03D0A;
  --f2-warning-fg-3: #FFFFFF;
  --f2-warning-border-1: #F2C811;
  --f2-warning-border-2: #E36414;

  --f2-danger-bg-1: #FDEAEA;
  --f2-danger-bg-3: #B10E1C;
  --f2-danger-fg-1: #B10E1C;
  --f2-danger-fg-3: #FFFFFF;
  --f2-danger-border-1: #EEACB2;
  --f2-danger-border-2: #B10E1C;

  /* ===== TYPOGRAPHY ===== */
  --f2-font: 'Inter', 'Segoe UI Variable', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --f2-font-mono: 'Cascadia Mono', 'Consolas', 'SF Mono', Menlo, monospace;
  --mme-font-serif: 'Source Serif 4', 'Charter', Georgia, 'Times New Roman', serif;

  /* Sizes */
  --f2-fs-100: 10px;
  --f2-fs-200: 12px;
  --f2-fs-300: 14px;
  --f2-fs-400: 16px;
  --f2-fs-500: 20px;
  --f2-fs-600: 24px;
  --f2-fs-700: 28px;
  --f2-fs-800: 32px;
  --f2-fs-900: 40px;
  --f2-fs-1000: 56px;

  /* Weights */
  --f2-fw-regular: 400;
  --f2-fw-medium: 500;
  --f2-fw-semibold: 600;
  --f2-fw-bold: 700;

  /* Line heights */
  --f2-lh-100: 14px;
  --f2-lh-200: 16px;
  --f2-lh-300: 20px;
  --f2-lh-400: 22px;
  --f2-lh-500: 28px;
  --f2-lh-600: 32px;
  --f2-lh-700: 36px;
  --f2-lh-800: 44px;
  --f2-lh-900: 60px;

  /* ===== RADIUS — tighter than v3 (Fluent + corporate) ===== */
  --f2-radius-none: 0;
  --f2-radius-xs: 2px;
  --f2-radius-sm: 3px;             /* v4 uses 3px on buttons/inputs — more editorial */
  --f2-radius-md: 4px;
  --f2-radius-lg: 6px;             /* cards */
  --f2-radius-xl: 8px;
  --f2-radius-xxl: 12px;
  --f2-radius-pill: 9999px;

  /* ===== SPACING ===== */
  --f2-sp-none: 0;
  --f2-sp-xxs: 2px;
  --f2-sp-xs: 4px;
  --f2-sp-snudge: 6px;
  --f2-sp-s: 8px;
  --f2-sp-mnudge: 10px;
  --f2-sp-m: 12px;
  --f2-sp-l: 16px;
  --f2-sp-xl: 20px;
  --f2-sp-xxl: 24px;
  --f2-sp-xxxl: 32px;
  --f2-sp-x4l: 48px;

  /* ===== STROKE WIDTH ===== */
  --f2-sw-5: 0.5px;
  --f2-sw-10: 1px;
  --f2-sw-15: 1.5px;
  --f2-sw-20: 2px;
  --f2-sw-30: 3px;

  /* ===== SHADOWS — softer, more corporate ===== */
  --f2-shadow-2: 0 0 2px rgba(0,61,128,0.06), 0 1px 2px rgba(0,61,128,0.08);
  --f2-shadow-4: 0 0 2px rgba(0,61,128,0.06), 0 2px 4px rgba(0,61,128,0.10);
  --f2-shadow-8: 0 0 2px rgba(0,61,128,0.08), 0 4px 8px rgba(0,61,128,0.10);
  --f2-shadow-16: 0 0 2px rgba(0,61,128,0.08), 0 8px 16px rgba(0,61,128,0.12);
  --f2-shadow-28: 0 0 8px rgba(0,61,128,0.10), 0 14px 28px rgba(0,61,128,0.14);
  --f2-shadow-64: 0 0 8px rgba(0,61,128,0.12), 0 32px 64px rgba(0,61,128,0.16);
  --f2-shadow-2-brand: 0 0 2px rgba(0,61,128,0.30), 0 1px 2px rgba(0,61,128,0.25);
  --f2-shadow-8-brand: 0 0 2px rgba(0,61,128,0.30), 0 4px 8px rgba(0,61,128,0.25);

  /* ===== MOTION ===== */
  --f2-dur-ultrafast: 50ms;
  --f2-dur-faster: 100ms;
  --f2-dur-fast: 150ms;
  --f2-dur-normal: 200ms;
  --f2-dur-slow: 300ms;
  --f2-dur-slower: 400ms;
  --f2-easing-accel-mid: cubic-bezier(1, 0, 1, 1);
  --f2-easing-decel-mid: cubic-bezier(0, 0, 0, 1);
  --f2-easing-easy-ease: cubic-bezier(0.33, 0, 0.67, 1);

  /* ===== CONTROL HEIGHT ===== */
  --f2-h-small: 24px;
  --f2-h-medium: 32px;
  --f2-h-large: 40px;
}

/* ============================================================
   COMPONENT BASE STYLES — v3 selectors, v4 values
   ============================================================ */

body, .f2-root {
  font-family: var(--f2-font);
  color: var(--f2-fg-1);
  background: var(--f2-bg-4);
  font-size: var(--f2-fs-300);
  line-height: var(--f2-lh-300);
}

/* --- BUTTON --- */
.f2-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--f2-sp-snudge);
  height: var(--f2-h-medium);
  padding: 0 var(--f2-sp-m);
  border-radius: var(--f2-radius-sm);
  border: var(--f2-sw-10) solid transparent;
  font-family: inherit;
  font-size: var(--f2-fs-300);
  font-weight: var(--f2-fw-semibold);
  cursor: pointer;
  text-decoration: none;
  transition: background var(--f2-dur-faster) var(--f2-easing-easy-ease);
}
.f2-btn-primary { background: var(--f2-brand-bg); color: var(--f2-fg-on-brand); }
.f2-btn-primary:hover { background: var(--f2-brand-bg-hover); }
.f2-btn-primary:active { background: var(--f2-brand-bg-pressed); }
.f2-btn-secondary { background: var(--f2-bg-1); color: var(--f2-fg-1); border-color: var(--f2-stroke-1); }
.f2-btn-secondary:hover { background: var(--f2-bg-1-hover); }
.f2-btn-subtle { background: transparent; color: var(--f2-fg-1); }
.f2-btn-subtle:hover { background: var(--f2-bg-subtle-hover); }
.f2-btn-small { height: var(--f2-h-small); font-size: var(--f2-fs-200); padding: 0 var(--f2-sp-s); }
.f2-btn-large { height: var(--f2-h-large); padding: 0 var(--f2-sp-l); }

/* --- INPUT --- */
.f2-input {
  display: flex;
  align-items: center;
  gap: var(--f2-sp-s);
  height: var(--f2-h-medium);
  padding: 0 var(--f2-sp-mnudge);
  background: var(--f2-bg-1);
  border: var(--f2-sw-10) solid var(--f2-stroke-1);
  border-bottom: var(--f2-sw-10) solid var(--f2-stroke-accessible);
  border-radius: var(--f2-radius-sm) var(--f2-radius-sm) 0 0;
  color: var(--f2-fg-1);
  font-size: var(--f2-fs-300);
  transition: border-bottom-color var(--f2-dur-faster);
}
.f2-input:focus-within {
  border-bottom: var(--f2-sw-20) solid var(--f2-brand-stroke-1);
}
.f2-input input {
  flex: 1; border: none; outline: none; font: inherit; color: inherit; background: transparent;
}

/* --- CARD --- */
.f2-card {
  background: var(--f2-bg-1);
  border: var(--f2-sw-10) solid var(--f2-stroke-2);
  border-radius: var(--f2-radius-lg);
  box-shadow: var(--f2-shadow-2);
  padding: var(--f2-sp-l);
}

/* --- PILL / TAG / BADGE --- */
.f2-tag {
  display: inline-flex;
  align-items: center;
  gap: var(--f2-sp-xs);
  padding: 2px var(--f2-sp-s);
  border-radius: var(--f2-radius-sm);
  font-size: var(--f2-fs-200);
  font-weight: var(--f2-fw-semibold);
}
.f2-tag-pill { border-radius: var(--f2-radius-pill); padding: var(--f2-sp-xs) var(--f2-sp-mnudge); }
.f2-tag-brand { background: var(--f2-brand-bg-1); color: var(--f2-brand-fg-1); }
.f2-tag-success { background: var(--f2-success-bg-1); color: var(--f2-success-fg-1); }
.f2-tag-warning { background: var(--f2-warning-bg-1); color: var(--f2-warning-fg-1); }
.f2-tag-danger { background: var(--f2-danger-bg-1); color: var(--f2-danger-fg-1); }
.mme-tag-editorial {
  background: transparent;
  color: var(--mme-editorial-400);
  padding: 3px 0;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: var(--f2-fw-semibold);
}

/* --- MESSAGEBAR --- */
.f2-msg {
  display: flex; align-items: center; gap: var(--f2-sp-m);
  padding: var(--f2-sp-mnudge) var(--f2-sp-l);
  background: var(--f2-brand-bg-1);
  border: var(--f2-sw-10) solid var(--f2-brand-stroke-2);
  border-left: var(--f2-sw-30) solid var(--f2-brand-stroke-1);
  border-radius: var(--f2-radius-sm);
}
.f2-msg-warning { background: var(--f2-warning-bg-1); border-color: var(--f2-warning-border-1); border-left-color: var(--f2-warning-border-2); }
.f2-msg-error { background: var(--f2-danger-bg-1); border-color: var(--f2-danger-border-1); border-left-color: var(--f2-danger-border-2); }
.f2-msg-success { background: var(--f2-success-bg-1); border-color: var(--f2-success-border-1); border-left-color: var(--f2-success-border-2); }

/* --- PERSONA --- */
.f2-persona { display: inline-flex; align-items: center; gap: var(--f2-sp-s); }
.f2-avatar {
  width: 32px; height: 32px; border-radius: var(--f2-radius-pill);
  background: var(--f2-brand-bg); color: var(--f2-fg-on-brand);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: var(--f2-fs-200); font-weight: var(--f2-fw-semibold); flex-shrink: 0;
}
.f2-avatar-sm { width: 24px; height: 24px; font-size: 10px; }
.f2-avatar-lg { width: 48px; height: 48px; font-size: var(--f2-fs-400); }

/* --- TYPOGRAPHY UTILITIES — v4 adds serif variants --- */
.f2-title-1 { font-family: var(--mme-font-serif); font-size: var(--f2-fs-900); line-height: var(--f2-lh-800); font-weight: var(--f2-fw-medium); letter-spacing: -0.015em; }
.f2-title-2 { font-family: var(--mme-font-serif); font-size: var(--f2-fs-800); line-height: var(--f2-lh-700); font-weight: var(--f2-fw-medium); letter-spacing: -0.01em; }
.f2-title-3 { font-family: var(--mme-font-serif); font-size: var(--f2-fs-700); line-height: var(--f2-lh-600); font-weight: var(--f2-fw-medium); letter-spacing: -0.005em; }
.f2-subtitle-1 { font-family: var(--f2-font); font-size: var(--f2-fs-600); line-height: var(--f2-lh-500); font-weight: var(--f2-fw-semibold); }
.f2-subtitle-2 { font-family: var(--f2-font); font-size: var(--f2-fs-500); line-height: var(--f2-lh-500); font-weight: var(--f2-fw-semibold); }
.f2-body-1-strong { font-size: var(--f2-fs-300); line-height: var(--f2-lh-300); font-weight: var(--f2-fw-semibold); }
.f2-body-1 { font-size: var(--f2-fs-300); line-height: var(--f2-lh-300); font-weight: var(--f2-fw-regular); }
.f2-caption-1 { font-size: var(--f2-fs-200); line-height: var(--f2-lh-200); font-weight: var(--f2-fw-regular); }
.f2-caption-1-strong { font-size: var(--f2-fs-200); line-height: var(--f2-lh-200); font-weight: var(--f2-fw-semibold); }
.mme-eyebrow { font-size: var(--f2-fs-200); text-transform: uppercase; letter-spacing: 0.08em; font-weight: var(--f2-fw-semibold); color: var(--mme-editorial-400); }
.mme-serif-num { font-family: var(--mme-font-serif); font-weight: var(--f2-fw-medium); letter-spacing: -0.02em; line-height: 1; }
.f2-mono { font-family: var(--f2-font-mono); }

/* --- LINK --- */
.f2-link { color: var(--f2-brand-fg-link); font-weight: var(--f2-fw-semibold); text-decoration: none; cursor: pointer; }
.f2-link:hover { color: var(--f2-brand-fg-link-hover); text-decoration: underline; }

/* --- V4 DETAILSLIST TABLE --- */
.mme-dl { width: 100%; border-collapse: collapse; font-size: var(--f2-fs-300); }
.mme-dl thead th {
  padding: var(--f2-sp-s) var(--f2-sp-l);
  background: var(--f2-bg-2);
  border-bottom: var(--f2-sw-10) solid var(--f2-stroke-2);
  font-size: var(--f2-fs-100); text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--f2-fg-3); font-weight: var(--f2-fw-semibold); text-align: left;
  position: sticky; top: 0; z-index: 1;
}
.mme-dl tbody td { padding: var(--f2-sp-mnudge) var(--f2-sp-l); border-bottom: var(--f2-sw-10) solid var(--f2-stroke-3); vertical-align: middle; }
.mme-dl tbody tr:hover { background: var(--f2-bg-1-hover); }
.mme-dl tbody tr.is-selected { background: var(--f2-brand-bg-1); border-left: var(--f2-sw-20) solid var(--f2-brand-stroke-1); }
.mme-dl .num { text-align: right; font-family: var(--f2-font-mono); font-weight: var(--f2-fw-semibold); }

/* --- V4 PERSONA TAB STRIP --- */
.mme-ptab {
  padding: var(--f2-sp-m) var(--f2-sp-l);
  font-size: var(--f2-fs-300); font-weight: var(--f2-fw-medium);
  color: var(--f2-fg-3); text-decoration: none; border-bottom: 2px solid transparent;
}
.mme-ptab.is-active { color: var(--f2-brand-fg-1); border-bottom-color: var(--f2-brand-fg-1); font-weight: var(--f2-fw-semibold); }