/* ============================================================
   JLM Medical Instruments — Design Tokens
   Source of truth: design_handoff_jlm_site/tokens.json (v1.0.0)
   Typography direction A — Montserrat + Lato (canonical)
   ============================================================ */
:root {
  /* ---- Color: brand red family ---- */
  --red: #DA0710;
  --red-hover: #B00610;
  --red-deep: #880108;
  --red-bright: #FF3B41;
  --red-featured: #FF7A7E;
  --dart-front: #EA2A31;
  --dart-back: #C8151B;
  --red-grad-deep: #9A0710;

  /* ---- Color: ink / neutrals (cool gray, ~0 saturation) ---- */
  --ink: #0E1116;
  --slate-strong: #1E293B;
  --slate: #334155;
  --body: #4E4E4E;
  --muted: #64607D;
  --slate-500: #64748B;
  --faint: #94A0AD;
  --brand-strip: #8A9099;

  /* ---- Color: surfaces & lines ---- */
  --white: #FFFFFF;
  --surface-section: #F7F8FA;
  --surface-cool: #F0F5FA;
  --surface-icon: #F4F6F9;
  --line: #EEF1F5;
  --line-2: #E7EBF0;
  --line-3: #E2E7EE;
  --border-btn: #D3DAE1;
  --border-tab: #C7CDD3;

  /* ---- Color: red tints ---- */
  --tint-chip: #FBE3E4;
  --tint-wash: #FBF4F4;
  --tint-ring: #F3CDCF;

  /* ---- Type families ---- */
  --font-display: 'Montserrat', system-ui, -apple-system, sans-serif;
  --font-body: 'Lato', system-ui, -apple-system, sans-serif;

  /* ---- Layout ---- */
  --container-max: 1300px;
  --gutter: clamp(20px, 4vw, 44px);
  --section-rhythm: clamp(60px, 8vw, 130px);
  --card-padding: clamp(26px, 3vw, 40px);
  --grid-gap-card: 18px;
  --grid-gap-bento: 16px;

  /* ---- Radius ---- */
  --r-sm: 6px;
  --r-md: 12px;
  --r-md-card: 14px;
  --r-lg: 16px;
  --r-xl: 20px;
  --r-pill: 100px;
  --r-circle: 50%;

  /* ---- Shadow / elevation ---- */
  --sh-header: 0 6px 22px rgba(15,23,42,.08);
  --sh-mega: 0 26px 44px rgba(15,23,42,.13);
  --sh-card-hover: 0 16px 30px rgba(15,23,42,.14);
  --sh-image: 0 26px 48px rgba(20,20,20,.24);
  --sh-btn-red: 0 5px 16px rgba(218,7,16,.24);
  --sh-btn-red-hover: 0 8px 22px rgba(218,7,16,.30);
  --sh-dart: 0 30px 44px rgba(218,7,16,.20);

  /* ---- Motion ---- */
  --ease: cubic-bezier(.16,.84,.44,1);
  --ease-sweep: cubic-bezier(.22,.61,.36,1);
}